@jetbrains/ring-ui 6.0.8 → 6.0.9

package/components/select/select.js

@@ -813,7 +813,7 @@ export default class Select extends Component {
             case Type.INPUT: return (<>
           <div ref={this.nodeRef} className={classNames(classes, styles.inputMode)} data-test={dataTests('ring-select', dataTest)}>
             {shortcutsEnabled && (<Shortcuts map={this.getShortcutsMap()} scope={this.shortcutsScope}/>)}
-            <Input {...ariaProps} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={composeRefs(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
+            <Input {...ariaProps} loading={this.props.loading} height={this.props.height} autoComplete="off" id={this.props.id} onClick={this._clickHandler} inputRef={composeRefs(this.filterRef, this.props.filterRef)} disabled={this.props.disabled} value={this.state.filterValue} borderless={this.props.type === Type.INPUT_WITHOUT_CONTROLS} style={style} size={Size.FULL} onChange={this._filterChangeHandler} onFocus={this._focusHandler} onBlur={this._blurHandler} 
             // Input with error style without description
             error={this.props.error != null ? '' : null} label={this.props.type === Type.INPUT ? this._getLabel() : null} placeholder={this.props.inputPlaceholder} onKeyDown={this.props.onKeyDown} data-test="ring-select__focus" enableShortcuts={shortcutsEnabled
                     ? Object.keys({

package/components/slider/slider.css

@@ -0,0 +1,178 @@
+@value dark from "../global/variables_dark.css";
+
+.slider {
+  --ring-slider-thumb-color: var(--ring-content-background-color);
+  --ring-slider-thumb-border: var(--ring-main-color);
+  --ring-slider-thumb-disabled-color: var(--ring-content-background-color);
+  --ring-slider-tag-disabled-text-color: var(--ring-white-text-color);
+
+  position: relative;
+
+  height: calc(var(--ring-unit) / 2);
+  padding: var(--ring-unit) 0;
+
+  cursor: pointer;
+
+  &.disabled {
+    cursor: default;
+  }
+
+  &.marked {
+    margin-top: calc(var(--ring-unit) * 3);
+  }
+}
+
+.dark, :global(.ring-ui-theme-dark) {
+  .slider {
+    --ring-slider-thumb-color: var(--ring-main-color);
+    --ring-slider-thumb-border: var(--ring-white-text-color);
+    --ring-slider-thumb-disabled-color: var(--ring-disabled-background-color);
+    --ring-slider-thumb-disabled-border: var(--ring-border-disabled-color);
+    --ring-slider-tag-disabled-text-color: var(--ring-secondary-color);
+  }
+}
+
+.rail {
+  height: inherit;
+
+  border-radius: calc(var(--ring-unit) / 2);
+
+  background-color: var(--ring-selected-background-color);
+
+  &.rounded {
+    border-radius: calc(var(--ring-unit) / 2);
+  }
+
+  &.disabled {
+    background-color: var(--ring-disabled-background-color);
+  }
+}
+
+.track {
+  position: absolute;
+  left: 0;
+
+  height: inherit;
+  margin-top:calc(var(--ring-unit) / -2);
+
+  border-radius: calc(var(--ring-unit) / 2);
+
+  background-color: var(--ring-main-color);
+
+  &.rounded {
+    border-radius: calc(var(--ring-unit) / 2);
+  }
+
+  &.disabled {
+    background-color: var(--ring-disabled-selected-background-color);
+  }
+}
+
+.thumb {
+  composes: resetButton from "../global/global.css";
+
+  position: absolute;
+  z-index: 1;
+
+  width: calc(var(--ring-unit) * 1.5);
+  height: calc(var(--ring-unit) * 1.5);
+  margin-top: calc(var(--ring-unit) * -1);
+
+  cursor: pointer;
+  transform: translateX(-50%);
+
+  border-radius: var(--ring-unit);
+  background-color: var(--ring-slider-thumb-color);
+  box-shadow: 0 1px 2px 0 var(--ring-popup-secondary-shadow-color), 0 2px 8px 0 var(--ring-popup-shadow-components);
+
+  &.disabled {
+    cursor: default;
+
+    border: 1px solid var(--ring-slider-thumb-disabled-border);
+    background-color: var(--ring-slider-thumb-disabled-color);
+  }
+
+  &.dragged {
+    cursor: grabbing;
+
+    border: 1px solid var(--ring-slider-thumb-border);
+  }
+}
+
+.tick {
+  position: absolute;
+
+  width: calc(var(--ring-unit) / 2);
+  height: calc(var(--ring-unit) / 2);
+  margin-top: calc(var(--ring-unit) / -2);
+  margin-left: calc(var(--ring-unit) / -4);
+
+  border-radius: calc(var(--ring-unit) / 2);
+  background-color: var(--ring-border-hover-color);
+
+  &.active {
+    background-color: var(--ring-main-hover-color);
+  }
+
+  &.disabled {
+    background-color: var(--ring-border-selected-disabled-color);
+  }
+}
+
+.markValue {
+  position: absolute;
+
+  margin-top:  calc(var(--ring-unit) * -4);
+  margin-left: calc(var(--ring-unit) / -4);
+
+  transform: translateX(calc(-50% + 2px));
+
+  color: var(--ring-text-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+
+  &.disabled {
+    color: var(--ring-disabled-color);
+  }
+}
+
+.tag {
+  position: absolute;
+  z-index: 2;
+
+  margin-top: calc(var(--ring-unit) * -4 - 2px);
+  padding: calc(var(--ring-unit) / 4) calc(var(--ring-unit) * 0.75);
+
+  transform: translateX(-50%);
+
+  color: var(--ring-white-text-color);
+  border-radius: calc(var(--ring-unit) / 2);
+
+  background-color: var(--ring-main-color);
+
+  font-size: var(--ring-font-size-smaller);
+  line-height: var(--ring-line-height-lowest);
+
+  &::after {
+      position: absolute;
+      top: 100%;
+      left: calc(50% - 3px);
+
+      content: ' ';
+
+      border-top: 3px solid var(--ring-main-color);
+
+      border-right: 3px solid transparent;
+      border-left: 3px solid transparent;
+    }
+
+  &.disabled {
+    color: var(--ring-slider-tag-disabled-text-color);
+    background-color: var(--ring-border-selected-disabled-color);
+
+    &::after {
+      border-top: 3px solid var(--ring-border-selected-disabled-color);
+    }
+  }
+}

package/components/slider/slider.d.ts

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+type Mark = {
+    value: number;
+    label?: ReactNode;
+};
+type Props = {
+    defaultValue?: number | number[];
+    value?: number | number[];
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    marks?: Mark[] | boolean;
+    showTicks?: boolean;
+    showTag?: boolean;
+    className?: string;
+    renderTag?: (value: number) => ReactNode;
+    onChange?: (value: number | number[]) => void;
+};
+export declare const Slider: React.FC<Props>;
+export {};

package/components/slider/slider.js

@@ -0,0 +1,176 @@
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { isArray } from '../global/typescript-utils';
+import Shortcuts from '../shortcuts/shortcuts';
+import getUID from '../global/get-uid';
+import styles from './slider.css';
+import { adjustValues, calculateMarks, calculateValue, HUNDRED, toPercent, toRange, validateValue } from './slider.utils';
+export const Slider = ({ defaultValue, value, min = 0, max = HUNDRED, step = 1, disabled, marks, showTicks, showTag, className, renderTag, onChange }) => {
+    const ref = useRef(null);
+    const previouslyDragged = useRef(false);
+    const [values, setValues] = useState(defaultValue ?? min);
+    const validValues = useMemo(() => toRange(value ?? values, min, max), [max, min, value, values]);
+    const validStep = step < 0 ? 0 : step;
+    const isRange = isArray(defaultValue ?? value);
+    const [isDragging, setIsDragging] = useState(false);
+    const [draggedIndex, setDraggedIndex] = useState(-1);
+    const [shortcutsScope] = useState(getUID('ring-slider-'));
+    const markValues = useMemo(() => {
+        if (isArray(marks)) {
+            return marks.map(mark => ({ ...mark, value: validateValue(mark.value, min, max) }));
+        }
+        else if (marks) {
+            return calculateMarks(min, max, validStep);
+        }
+        return [];
+    }, [marks, max, min, validStep]);
+    const tickMarks = useMemo(() => {
+        if (showTicks) {
+            return markValues.length ? markValues : calculateMarks(min, max, validStep);
+        }
+        return [];
+    }, [max, min, markValues, showTicks, validStep]);
+    const trackStart = useMemo(() => toPercent(isRange ? Math.min(...validValues) : min, min, max), [isRange, max, min, validValues]);
+    const trackLength = useMemo(() => toPercent(Math.max(...validValues), min, max) - trackStart, [max, min, trackStart, validValues]);
+    const handleValueChange = useCallback((nextValues) => {
+        setValues(nextValues);
+        onChange?.(isRange ? nextValues : nextValues[0]);
+    }, [isRange, onChange]);
+    const shortcutsMap = useMemo(() => {
+        const setValueAndSwap = (nextValue, index) => {
+            const nextValues = [...validValues];
+            nextValues[index] = nextValue;
+            if (nextValues[0] > nextValues[1]) {
+                const previousValue = nextValues[index];
+                nextValues.reverse();
+                const thumb = ref.current?.querySelector(`[role="slider"][data-index="${nextValues.indexOf(previousValue)}"]`);
+                thumb?.focus();
+            }
+            handleValueChange(nextValues);
+        };
+        const getIndex = (target) => Number(target?.getAttribute('data-index'));
+        const map = {};
+        if (!disabled) {
+            map.left = map.down = ({ target }) => {
+                const index = getIndex(target);
+                setValueAndSwap(Math.max(min, validValues[index] - validStep), index);
+            };
+            map.right = map.up = ({ target }) => {
+                const index = getIndex(target);
+                setValueAndSwap(Math.min(max, validValues[index] + validStep), index);
+            };
+            map.home = ({ target }) => {
+                const index = getIndex(target);
+                setValueAndSwap(min, index);
+            };
+            map.end = ({ target }) => {
+                const index = getIndex(target);
+                setValueAndSwap(max, index);
+            };
+        }
+        return map;
+    }, [disabled, handleValueChange, max, min, validStep, validValues]);
+    const handleMouseDown = useCallback((e) => {
+        e.stopPropagation();
+        if (disabled) {
+            return;
+        }
+        const index = e.currentTarget.getAttribute('data-index');
+        const nextValue = calculateValue(ref, e.pageX, min, max, validStep);
+        if (nextValue !== null && !isNaN(nextValue) && !index) {
+            const rangeIndex = Number(Math.abs(validValues[0] - nextValue) > Math.abs(validValues[1] - nextValue));
+            setDraggedIndex(isRange ? rangeIndex : 0);
+        }
+        else {
+            setDraggedIndex(Number(index));
+        }
+        setIsDragging(true);
+        previouslyDragged.current = false;
+    }, [disabled, isRange, max, min, validStep, validValues]);
+    const handleMouseUp = useCallback(({ pageX }) => {
+        const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
+        if (nextValues[0] > nextValues[1]) {
+            nextValues.reverse();
+        }
+        handleValueChange(nextValues);
+        setDraggedIndex(-1);
+        setIsDragging(false);
+        previouslyDragged.current = true;
+    }, [validValues, draggedIndex, handleValueChange, max, min, validStep]);
+    const handleMouseMove = useCallback(({ pageX }) => {
+        const nextValues = adjustValues(validValues, ref, draggedIndex, pageX, max, min, validStep);
+        if (nextValues[0] > nextValues[1]) {
+            nextValues.reverse();
+            setDraggedIndex(prevState => (prevState === 0 ? 1 : 0));
+        }
+        handleValueChange(nextValues);
+    }, [validValues, draggedIndex, max, min, validStep, handleValueChange]);
+    useEffect(() => {
+        if (disabled) {
+            return undefined;
+        }
+        if (isDragging && !previouslyDragged.current) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        else if (!isDragging && previouslyDragged.current) {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, handleMouseMove, handleMouseUp, disabled]);
+    return (<div ref={ref} role="button" className={classNames(styles.slider, className, {
+            [styles.disabled]: disabled,
+            [styles.marked]: !!marks || showTag
+        })} tabIndex={-1} onMouseDown={handleMouseDown}>
+      <Shortcuts map={shortcutsMap} scope={shortcutsScope}/>
+      <div className={classNames(styles.rail, {
+            [styles.rounded]: !showTicks,
+            [styles.disabled]: disabled
+        })}/>
+      <div style={{
+            left: `${trackStart}%`,
+            width: `${trackLength}%`
+        }} className={classNames(styles.track, {
+            [styles.rounded]: !showTicks,
+            [styles.disabled]: disabled
+        })}/>
+      {validValues.map((numValue, index) => {
+            const percent = toPercent(numValue, min, max);
+            return (
+            // eslint-disable-next-line react/no-array-index-key
+            <Fragment key={index}>
+            <button type="button" role="slider" aria-valuemin={min} aria-valuemax={max} aria-valuenow={numValue} data-index={index} style={{ left: `${percent}%` }} className={classNames(styles.thumb, {
+                    [styles.disabled]: disabled,
+                    [styles.dragged]: isDragging && draggedIndex === index
+                })} disabled={disabled} onMouseDown={handleMouseDown}/>
+            {showTag && (<div style={{ left: `${percent}%` }} className={classNames(styles.tag, { [styles.disabled]: disabled })} role="tooltip">
+                {renderTag ? renderTag(numValue) : numValue}
+              </div>)}
+          </Fragment>);
+        })}
+      {markValues.map(({ value: markValue, label }, index) => {
+            const percent = toPercent(markValue, min, max);
+            return (<div 
+            // eslint-disable-next-line react/no-array-index-key
+            key={index} style={{ left: `${percent}%` }} className={classNames(styles.markValue, { [styles.disabled]: disabled })}>
+            {label ?? markValue}
+          </div>);
+        })}
+      {tickMarks.map(({ value: tickValue }, index) => {
+            const percent = toPercent(tickValue, min, max);
+            const isActive = isRange
+                ? tickValue >= validValues[0] && tickValue <= validValues[validValues.length - 1]
+                : tickValue <= validValues[0];
+            return (<div 
+            // eslint-disable-next-line react/no-array-index-key
+            key={index} className={classNames(styles.tick, {
+                    [styles.active]: isActive,
+                    [styles.disabled]: disabled
+                })} style={{ left: `${percent}%` }}/>);
+        })}
+    </div>);
+};

package/components/slider/slider.utils.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export declare const HUNDRED = 100;
+export declare function toPercent(value: number, min: number, max: number): number;
+export declare function calculateValue(ref: RefObject<HTMLDivElement>, x: number, min: number, max: number, step: number): number | null;
+export declare function validateValue(value: number, min: number, max: number): number;
+export declare function toRange(value: number | number[], min: number, max: number): number[];
+export declare function adjustValues(values: number[], ref: RefObject<HTMLDivElement>, index: number, x: number, max: number, min: number, step: number): number[];
+export declare function calculateMarks(min: number, max: number, step: number): {
+    value: number;
+}[];

package/components/slider/slider.utils.js

@@ -0,0 +1,53 @@
+import { isArray } from '../global/typescript-utils';
+export const HUNDRED = 100;
+export function toPercent(value, min, max) {
+    return ((value - min) * HUNDRED) / (max - min);
+}
+function toValue(percent, min, max) {
+    return (max - min) * percent + min;
+}
+function roundToStep(value, step, min) {
+    return Math.round((value - min) / step) * step + min;
+}
+export function calculateValue(ref, x, min, max, step) {
+    if (!ref.current) {
+        return null;
+    }
+    const { width, left } = ref.current.getBoundingClientRect();
+    const value = toValue((x - left) / width, min, max);
+    const precision = step.toString().split('.')?.[1]?.length;
+    return Number(roundToStep(value, step, min).toFixed(precision));
+}
+export function validateValue(value, min, max) {
+    if (value <= min) {
+        return min;
+    }
+    if (value >= max) {
+        return max;
+    }
+    return value;
+}
+export function toRange(value, min, max) {
+    if (isArray(value)) {
+        const nextValues = value.slice(0, 2).map(val => validateValue(val, min, max));
+        if (nextValues[0] > nextValues[1]) {
+            nextValues.reverse();
+        }
+        return nextValues;
+    }
+    else {
+        return [validateValue(value, min, max)];
+    }
+}
+export function adjustValues(values, ref, index, x, max, min, step) {
+    const nextValue = calculateValue(ref, x, min, max, step);
+    const nextValues = [...values];
+    if (nextValue !== null && !isNaN(nextValue)) {
+        nextValues[index] = validateValue(nextValue, min, max);
+    }
+    return nextValues;
+}
+export function calculateMarks(min, max, step) {
+    const numMarks = Math.floor((max - min) / step) + 1;
+    return Array.from({ length: numMarks }, (_, index) => ({ value: validateValue(min + step * index, min, max) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "description": "JetBrains UI library",
   "author": "JetBrains",
   "license": "Apache-2.0",
@@ -78,8 +78,8 @@
   "devDependencies": {
     "@babel/cli": "^7.23.9",
     "@babel/eslint-parser": "^7.23.10",
-    "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@csstools/css-parser-algorithms": "^2.6.0",
+    "@csstools/stylelint-no-at-nest-rule": "^2.0.0",
     "@jetbrains/eslint-config": "^5.4.1",
     "@jetbrains/stylelint-config": "^4.0.2",
     "@primer/octicons": "^19.8.0",
@@ -87,36 +87,37 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
-    "@storybook/addon-a11y": "7.6.16",
-    "@storybook/addon-docs": "7.6.16",
-    "@storybook/addon-essentials": "7.6.16",
-    "@storybook/addon-storyshots": "7.6.16",
-    "@storybook/addon-storyshots-puppeteer": "7.6.16",
-    "@storybook/addon-storysource": "7.6.16",
-    "@storybook/addons": "7.6.16",
-    "@storybook/preview-api": "7.6.16",
-    "@storybook/react": "7.6.16",
-    "@storybook/react-webpack5": "7.6.16",
-    "@storybook/source-loader": "7.6.16",
-    "@storybook/theming": "7.6.16",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-docs": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-storyshots": "7.6.17",
+    "@storybook/addon-storyshots-puppeteer": "7.6.17",
+    "@storybook/addon-storysource": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/components": "7.6.17",
+    "@storybook/preview-api": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/source-loader": "7.6.17",
+    "@storybook/theming": "7.6.17",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/chai": "^4.3.11",
+    "@types/chai": "^4.3.12",
     "@types/chai-as-promised": "^7.1.8",
     "@types/chai-dom": "0.0.10",
     "@types/chai-enzyme": "^0.6.13",
     "@types/enzyme": "^3.10.18",
     "@types/markdown-it": "^13.0.7",
-    "@types/react": "^18.2.57",
+    "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
-    "@typescript-eslint/eslint-plugin": "^7.0.2",
-    "@typescript-eslint/parser": "^7.0.2",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "acorn": "^8.11.3",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "caniuse-lite": "^1.0.30001588",
+    "caniuse-lite": "^1.0.30001591",
     "chai": "^5.1.0",
     "chai-as-promised": "^7.1.1",
     "chai-dom": "^1.10.0",
@@ -125,7 +126,7 @@
     "core-js": "^3.36.0",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-import-resolver-webpack": "^0.13.8",
     "eslint-plugin-bdd": "^2.1.1",
     "eslint-plugin-import": "^2.29.1",
@@ -141,7 +142,7 @@
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-teamcity": "^1.10.0",
-    "karma": "^6.4.2",
+    "karma": "^6.4.3",
     "karma-chrome-launcher": "3.2.0",
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.4.0",
@@ -153,7 +154,7 @@
     "mocha": "^10.3.0",
     "pinst": "^3.0.0",
     "prettier": "^3.2.5",
-    "puppeteer": "^22.1.0",
+    "puppeteer": "^22.3.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -166,7 +167,7 @@
     "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "storage-mock": "^2.1.0",
-    "storybook": "7.6.16",
+    "storybook": "7.6.17",
     "storybook-addon-themes": "^6.1.0",
     "stylelint": "^16.2.1",
     "svg-inline-loader": "^0.8.2",
@@ -198,7 +199,7 @@
     }
   },
   "dependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
     "@jetbrains/babel-preset-jetbrains": "^2.3.2",
     "@jetbrains/icons": "^4.0.1",
@@ -234,11 +235,11 @@
     "postcss-calc": "^9.0.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^8.1.0",
+    "postcss-loader": "^8.1.1",
     "postcss-modules-values-replace": "^4.1.0",
     "postcss-preset-env": "^9.4.0",
     "prop-types": "^15.8.1",
-    "react-movable": "^3.0.4",
+    "react-movable": "^3.2.0",
     "react-virtualized": "^9.22.5",
     "react-waypoint": "^10.3.0",
     "scrollbar-width": "^3.1.1",