@jetbrains/ring-ui-built 7.0.123-beta.0 → 7.0.124

package/components/table/header-cell.js

@@ -10,6 +10,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 
 class HeaderCell extends PureComponent {

package/components/table/header.js

@@ -12,6 +12,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../global/compose-refs.js';
 import 'memoize-one';

package/components/table/row-with-focus-sensor.js

@@ -16,6 +16,7 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
@@ -23,7 +24,6 @@ import '../button/button.js';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../tooltip/tooltip.js';
 import '../popup/popup.js';

package/components/table/row.js

@@ -19,12 +19,12 @@ import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../popup/popup.js';
 import 'react-dom';

package/components/table/simple-table.js

@@ -27,6 +27,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
@@ -43,7 +44,6 @@ import '@jetbrains/icons/drag';
 import '../button/button.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../tooltip/tooltip.js';
 import '../popup/popup.js';

package/components/table/smart-table.js

@@ -26,6 +26,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
@@ -43,7 +44,6 @@ import '@jetbrains/icons/drag';
 import '../button/button.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../tooltip/tooltip.js';
 import '../popup/popup.js';

package/components/table/table.js

@@ -28,6 +28,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../control-help/control-help.js';
 import '../global/data-tests.js';
@@ -41,7 +42,6 @@ import '@jetbrains/icons/drag';
 import '../button/button.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../tooltip/tooltip.js';
 import '../popup/popup.js';

package/components/tags-input/tags-input.js

@@ -25,9 +25,9 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
-import '../global/configuration.js';
 import '../avatar/avatar.js';
 import 'core-js/modules/es.array.includes.js';
 import '../global/url.js';

package/components/tags-list/tags-list.js

@@ -8,13 +8,13 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../global/data-tests.js';
 

package/components/upload/upload.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../global/memoize.js';
 
 var styles = {"upload":"ring-upload-upload","success":"ring-upload-success","error":"ring-upload-error","dragOver":"ring-upload-dragOver","disabled":"ring-upload-disabled","invisibleFileInput":"ring-upload-invisibleFileInput","attachmentIcon":"ring-upload-attachmentIcon"};

package/components/user-agreement/service.js

@@ -20,6 +20,7 @@ import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react-compiler-runtime';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../loader-inline/loader-inline.js';
 import '../global/data-tests.js';
@@ -29,7 +30,6 @@ import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../_helpers/button.classes.js';
-import '../global/configuration.js';
 import '../_helpers/theme.js';
 import '../alert/alert-heading.js';
 import '../heading/heading.js';

package/components/user-card/smart-user-card-tooltip.js

@@ -16,10 +16,10 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../popup/popup.js';
 import 'react-dom';

package/components/user-card/tooltip.js

@@ -15,10 +15,10 @@ import 'util-deprecate';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../global/memoize.js';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import 'react-dom';
 import '../global/get-uid.js';

package/components/user-card/user-card.js

@@ -32,12 +32,12 @@ import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
+import '../global/configuration.js';
 import '../loader-inline/loader-inline.js';
 import '../button/button.js';
 import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../global/controls-height.js';
-import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
 import '../alert/alert-heading.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.123-beta.0",
+  "version": "7.0.124",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -9,7 +9,6 @@
   "packageManager": "npm@8.11.0",
   "files": [
     "components",
-    "skills",
     "typings.d.ts"
   ],
   "exports": {
@@ -57,7 +56,7 @@
     "prelint-ci": "echo \"##teamcity[importData type='jslint' path='eslint-report.xml']\"",
     "lint-ci": "eslint --format jslint-xml . > eslint-report.xml && npm run stylelint-ci",
     "lint:js": "eslint",
-    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/",
+    "postbuild": "cpy './**/*.d.ts' ../dist --parents --cwd=components/ && node scripts/check-built-css.mjs",
     "_postinstall": "husky && npm run postinstall:gitconfig",
     "postinstall:gitconfig": "git config blame.ignoreRevsFile .git-blame-ignore-revs",
     "postpublish": "pinst --enable",
@@ -66,7 +65,7 @@
     "prebuild": "rimraf components && npm run prebuild:tsc && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
     "prebuild:tsc": "(npm run type-check:create-d-ts && tsc --project tsconfig-build.json) ; npm run type-check:cleanup-d-ts",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
-    "prepublishOnly": "npm run verify-package-skills && pinst --disable",
+    "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
     "prerelease-ci": "git pull",
     "release-built-ci": "npm publish --access=public $NPM_PUBLISH_PARAMS",
@@ -80,8 +79,7 @@
     "storybook-debug": "node --inspect-brk node_modules/@storybook/react/bin -p 9999",
     "stylelint": "stylelint --ignore-path .stylelintignore '**/*.css'",
     "stylelint-ci": "stylelint --ignore-path .stylelintignore --custom-formatter 'scripts/jslint-xml.js' '**/*.css' | xmlappend eslint-report.xml",
-    "test": "vitest src",
-    "verify-package-skills": "node scripts/verify-package-skills.mjs",
+    "test": "vitest src && npm test --workspace @jetbrains/rollup-css-plugin",
     "type-check": "(npm run type-check:create-d-ts && npm run type-check:main && npm run type-check:build) ; npm run type-check:cleanup-d-ts",
     "type-check:create-d-ts": "npx tcm src && npx tcm .storybook",
     "type-check:main": "tsc --noEmit -p tsconfig.json",
@@ -115,7 +113,7 @@
   },
   "dependencies": {
     "@jetbrains/icons": "^5.23.0",
-    "change-case": "^4.1.1",
+    "change-case": "^5.4.4",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
     "date-fns": "^4.4.0",

package/skills/ring-ui/SKILL.md

@@ -1,43 +0,0 @@
----
-name: ring-ui
-description: Use when implementing, laying out, theming, validating, or troubleshooting React interfaces that use @jetbrains/ring-ui-built.
----
-
-# Ring UI
-
-Use Ring UI for controls, surfaces, and design tokens. Let semantic HTML and native CSS Flexbox/Grid own page structure and geometry.
-
-## When to use
-
-Use this skill for React pages, settings forms, dialogs, navigation, responsive composition, themes, loading/empty/error states, or accessibility work in a project that uses or is being set up to use `@jetbrains/ring-ui-built`.
-
-Do not use it for non-React interfaces, projects that neither use nor are being set up to use Ring UI, or product-specific YouTrack infrastructure. Do not introduce Ring UI merely to solve generic page layout.
-
-## Workflow
-
-1. Before initializing or laying out an application, read [references/page-layouts.md](references/page-layouts.md) and follow its app setup, even if `@jetbrains/ring-ui-built` is not installed yet.
-2. If the package is installed, inspect `package.json` and the lockfile for its exact version. Read its `README.md` and relevant `.d.ts` files before choosing imports or props.
-3. Import components only from `@jetbrains/ring-ui-built`. Compose Ring controls and surfaces inside semantic landmarks, and use native CSS Flexbox/Grid for page geometry and CSS media/container queries for responsiveness.
-4. Use `--ring-*` tokens for colors, typography, borders, and spacing based on `--ring-unit`. Do not copy their resolved values.
-5. Model form draft, saved, validation, submission, and result state explicitly. Distinguish blocking loading, local loading, background work, first-use empty, filtered empty, success, warning, and retryable failure.
-
-## Preferred patterns
-
-- Use one semantic `h1`, clear landmarks, native anchors for navigation, and native/Ring buttons for actions. Do not make clickable `div` elements.
-- Prefer `Input`'s own `label`. Give externally labelled controls stable IDs and connect `htmlFor`, `aria-describedby`, and errors explicitly.
-- Keep `Select` controlled and explicitly generic: use `Select<T>` with `SelectItem<T>[]` data, selected item, and `onChange` argument—never `Select<SelectItem<T>>` or guessed primitive values.
-- Wrap error `Banner` content in `role="alert"`, non-urgent status/success content in `role="status"`, blocking `LoaderScreen` content in a named status region, and local `LoaderInline` content in a named status region. Avoid announcing background work that does not affect the user.
-- Use CSS Modules. Put `min-width: 0` on shrinking grid/flex children, `min-height: 0` where vertical flex children scroll, and assign each axis to one explicit scroll owner.
-- Use CSS media queries for page-wide geometry and container queries for reusable components. Branch in React only when interaction or content structure must change.
-- Never style Ring UI internal classes or `data-test` attributes. Treat test hooks as behavior selectors, not CSS APIs.
-
-Do not add new uses of Ring UI's deprecated `Grid`/`Row`/`Col` or `ContentLayout`. Do not copy product-specific YouTrack wrappers such as `ButtonLegacy` or `IconLegacy`, page shells, portals, sticky stacks, form wrappers, or alert services into package consumers.
-
-## Common tasks
-
-- App setup, page shells, responsive navigation, sticky regions, and scroll ownership: read [references/page-layouts.md](references/page-layouts.md).
-- Forms, validation, dirty state, async saving, and page feedback: read [references/forms-and-feedback.md](references/forms-and-feedback.md).
-
-## Validation
-
-Run the consuming repository's type-check, focused tests, lint, and production build equivalents. Interactively check near `1280x800` and `390x844`: accessible names and keyboard order, every state transition and action, page and popup overflow, heading hierarchy, theme behavior, and the browser console.

package/skills/ring-ui/references/forms-and-feedback.md

@@ -1,261 +0,0 @@
-# Forms and feedback
-
-Use a native `<form>` as the composition root. Ring UI supplies controls and feedback surfaces; React owns the saved snapshot, draft, validation, submission, and result states.
-
-The example and consumer imports use `@jetbrains/ring-ui-built`.
-
-## Contents
-
-- [Complete controlled settings form](#complete-controlled-settings-form)
-- [Form-state rules](#form-state-rules)
-- [Page-state decisions](#page-state-decisions)
-
-## Complete controlled settings form
-
-`project-settings-form.tsx`:
-
-```tsx
-import {useState, type FormEvent} from 'react';
-import Banner from '@jetbrains/ring-ui-built/components/banner/banner';
-import Button from '@jetbrains/ring-ui-built/components/button/button';
-import ButtonSet from '@jetbrains/ring-ui-built/components/button-set/button-set';
-import ControlLabel from '@jetbrains/ring-ui-built/components/control-label/control-label';
-import Input from '@jetbrains/ring-ui-built/components/input/input';
-import Select, {type SelectItem} from '@jetbrains/ring-ui-built/components/select/select';
-import Toggle from '@jetbrains/ring-ui-built/components/toggle/toggle';
-
-import styles from './project-settings-form.module.css';
-
-type Visibility = 'private' | 'team' | 'public';
-
-type VisibilityData = {
-  value: Visibility;
-};
-
-type Settings = {
-  name: string;
-  visibility: Visibility;
-  notifications: boolean;
-};
-
-type ProjectSettingsFormProps = {
-  initialValue: Settings;
-  onSave: (value: Settings) => Promise<void>;
-};
-
-const VISIBILITY_OPTIONS: SelectItem<VisibilityData>[] = [
-  {key: 'private', label: 'Private', value: 'private'},
-  {key: 'team', label: 'Team', value: 'team'},
-  {key: 'public', label: 'Public', value: 'public'},
-];
-
-const NAME_ID = 'project-settings-name';
-const NAME_HELP_ID = 'project-settings-name-help';
-const NAME_ERROR_ID = 'project-settings-name-error';
-const VISIBILITY_ID = 'project-settings-visibility';
-const NOTIFICATIONS_ID = 'project-settings-notifications';
-
-export function ProjectSettingsForm({initialValue, onSave}: ProjectSettingsFormProps) {
-  const [saved, setSaved] = useState(initialValue);
-  const [draft, setDraft] = useState(initialValue);
-  const [submitting, setSubmitting] = useState(false);
-  const [showErrors, setShowErrors] = useState(false);
-  const [savedMessage, setSavedMessage] = useState<string | null>(null);
-  const [saveError, setSaveError] = useState<string | null>(null);
-
-  const nameError = draft.name.trim() ? null : 'Project name is required.';
-  const dirty =
-    draft.name !== saved.name ||
-    draft.visibility !== saved.visibility ||
-    draft.notifications !== saved.notifications;
-  const selectedVisibility =
-    VISIBILITY_OPTIONS.find(option => option.value === draft.visibility) ?? null;
-
-  const updateDraft = (next: Settings) => {
-    setDraft(next);
-    setSavedMessage(null);
-    setSaveError(null);
-  };
-
-  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (submitting) return;
-
-    setShowErrors(true);
-    setSavedMessage(null);
-    setSaveError(null);
-    if (nameError) return;
-
-    const next = {...draft, name: draft.name.trim()};
-    setSubmitting(true);
-    try {
-      await onSave(next);
-      setSaved(next);
-      setDraft(next);
-      setShowErrors(false);
-      setSavedMessage('Project settings saved.');
-    } catch {
-      setSaveError('Could not save project settings. Try again.');
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  const handleCancel = () => {
-    setDraft(saved);
-    setShowErrors(false);
-    setSavedMessage(null);
-    setSaveError(null);
-  };
-
-  const nameDescribedBy =
-    showErrors && nameError ? `${NAME_HELP_ID} ${NAME_ERROR_ID}` : NAME_HELP_ID;
-
-  return (
-    <form className={styles.form} onSubmit={handleSubmit} noValidate>
-      {saveError && (
-        <div role="alert">
-          <Banner mode="error" withIcon>
-            {saveError}
-          </Banner>
-        </div>
-      )}
-      {savedMessage && (
-        <div role="status">
-          <Banner mode="success" withIcon>
-            {savedMessage}
-          </Banner>
-        </div>
-      )}
-
-      <div className={styles.field}>
-        <Input
-          id={NAME_ID}
-          label="Project name"
-          value={draft.name}
-          required
-          disabled={submitting}
-          aria-invalid={showErrors && Boolean(nameError)}
-          aria-describedby={nameDescribedBy}
-          error={showErrors && nameError ? '' : undefined}
-          onChange={event => updateDraft({...draft, name: event.currentTarget.value})}
-        />
-        <p id={NAME_HELP_ID} className={styles.help}>
-          Shown in project navigation and search.
-        </p>
-        {showErrors && nameError && (
-          <p id={NAME_ERROR_ID} className={styles.error}>
-            {nameError}
-          </p>
-        )}
-      </div>
-
-      <div className={styles.field}>
-        <Select<VisibilityData>
-          id={VISIBILITY_ID}
-          data={VISIBILITY_OPTIONS}
-          selected={selectedVisibility}
-          selectedLabel="Visibility"
-          label="Choose visibility"
-          disabled={submitting}
-          onChange={(option: SelectItem<VisibilityData> | null) => {
-            if (option) updateDraft({...draft, visibility: option.value});
-          }}
-        />
-        <p className={styles.help}>Controls who can discover and open this project.</p>
-      </div>
-
-      <div className={styles.toggleField}>
-        <ControlLabel htmlFor={NOTIFICATIONS_ID} disabled={submitting}>
-          Email notifications
-        </ControlLabel>
-        <Toggle
-          id={NOTIFICATIONS_ID}
-          checked={draft.notifications}
-          disabled={submitting}
-          onChange={event => updateDraft({...draft, notifications: event.currentTarget.checked})}
-        />
-      </div>
-
-      {dirty && (
-        <ButtonSet className={styles.actions}>
-          <Button primary type="submit" loader={submitting} disabled={submitting}>
-            Save
-          </Button>
-          <Button type="button" disabled={submitting} onClick={handleCancel}>
-            Cancel
-          </Button>
-        </ButtonSet>
-      )}
-    </form>
-  );
-}
-```
-
-`project-settings-form.module.css`:
-
-```css
-.form {
-  display: grid;
-  width: min(100%, calc(var(--ring-unit) * 75));
-  gap: calc(var(--ring-unit) * 3);
-}
-
-.field {
-  display: grid;
-  gap: calc(var(--ring-unit) / 2);
-  min-width: 0;
-}
-
-.help,
-.error {
-  margin: 0;
-  font-size: var(--ring-font-size-smaller);
-  line-height: var(--ring-line-height-lowest);
-}
-
-.help {
-  color: var(--ring-secondary-color);
-}
-
-.error {
-  color: var(--ring-error-color);
-}
-
-.toggleField {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: calc(var(--ring-unit) * 2);
-  padding-block: var(--ring-unit);
-}
-
-.actions {
-  padding-block-start: calc(var(--ring-unit) * 2);
-  border-block-start: 1px solid var(--ring-line-color);
-}
-```
-
-## Form-state rules
-
-- Keep persisted `saved` data separate from editable `draft`. Derive validity, dirty state, and the selected `SelectItem` instead of storing duplicates.
-- React only uses `initialValue` for the first `useState` call. If the mounted form can switch records or receive a server refresh, resynchronize `saved` and `draft` from a stable record ID/version. Decide explicitly whether a dirty draft wins, is discarded, or requires confirmation; do not reset on every new object reference.
-- Add an unsaved-navigation guard when leaving the route, closing a sidebar, or dismissing a dialog could destroy a dirty draft. Remove the guard after save or cancel.
-- Keep field rules close to their derived errors. Reveal errors on submit or blur, retain persistent help, connect all help/error IDs with `aria-describedby`, and move focus to the first invalid field when long forms can fail off-screen.
-- Prevent duplicate submission in both the handler and controls. While saving, propagate `disabled` to every editable control, external label/help action, Save, Cancel, and dependent section; use the primary button's `loader` for local progress.
-- Put actions after page fields for ordinary pages, in the owning sidebar's sticky/footer region for sidebar editors, and in the dialog action area for dialogs. Keep them inside the native form so Enter submits predictably.
-
-## Page-state decisions
-
-| State | Use | Accessibility and behavior |
-| --- | --- | --- |
-| Blocking loading | `LoaderScreen` in the main region | Give the region `role="status"` and an accessible loading name; replace it with content when ready. |
-| Local loading | `LoaderInline` beside the affected section/control | Name the local status; keep unrelated content and actions usable. |
-| Background loading | Subtle inline progress only when users need it | Do not block the page or repeatedly announce silent refreshes. |
-| Initial empty | Purpose, short explanation, and primary creation/setup action | Distinguish absence of data from an error. |
-| Filtered empty | “No matches” plus clear/change-filter action | Preserve the user's data and current filter context. |
-| Contextual risk | Persistent warning/error `Banner` near the affected controls | Use `role="alert"` only when immediate interruption is warranted. |
-| Success | `Banner` or message in `role="status"` near the saved region | Confirm the completed action without moving focus. |
-| Retryable failure | Error `Banner` in `role="alert"` with a retry path | Preserve the draft, stop the loader, and re-enable controls. |
-
-Avoid uncontrolled forms that also maintain a shared saved snapshot, untyped `Select` values or guessed primitive selections, duplicate submission paths, inaccessible labels/help, conflating first-use and filtered empty states, and transient alerts as a replacement for persistent field validation.