@atlaskit/range 5.0.11

package/codemods/4.0.0-lite-mode.ts

@@ -0,0 +1,92 @@
+import core, {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  JSXAttribute,
+  Options,
+} from 'jscodeshift';
+
+function getDefaultSpecifier(
+  j: core.JSCodeshift,
+  source: any,
+  specifier: string,
+) {
+  const specifiers = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === specifier,
+    )
+    .find(j.ImportDefaultSpecifier);
+
+  if (!specifiers.length) {
+    return null;
+  }
+  return specifiers.nodes()[0]!.local!.name;
+}
+
+function getJSXAttributesByName(
+  j: core.JSCodeshift,
+  element: ASTPath<any>,
+  attributeName: string,
+) {
+  return j(element)
+    .find(j.JSXOpeningElement)
+    .find(j.JSXAttribute)
+    .filter((attribute) => {
+      const matches = j(attribute)
+        .find(j.JSXIdentifier)
+        .filter((identifier) => identifier.value.name === attributeName);
+      return Boolean(matches.length);
+    });
+}
+
+function updateRef(j: core.JSCodeshift, source: any) {
+  const defaultSpecifier = getDefaultSpecifier(j, source, '@atlaskit/range');
+
+  if (!defaultSpecifier) {
+    return;
+  }
+
+  source
+    .findJSXElements(defaultSpecifier)
+    .forEach((element: ASTPath<JSXAttribute>) => {
+      getJSXAttributesByName(j, element, 'inputRef').forEach((attribute) => {
+        j(attribute).replaceWith(
+          j.jsxAttribute(j.jsxIdentifier('ref'), attribute.node.value),
+        );
+      });
+    });
+}
+
+function hasImportDeclaration(
+  j: core.JSCodeshift,
+  source: any,
+  importPath: string,
+) {
+  const imports = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === importPath,
+    );
+
+  return Boolean(imports.length);
+}
+
+export default function transformer(
+  fileInfo: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const source = j(fileInfo.source);
+
+  if (!hasImportDeclaration(j, source, '@atlaskit/range')) {
+    return fileInfo.source;
+  }
+
+  updateRef(j, source);
+
+  return source.toSource(options.printOptions || { quote: 'single' });
+}

package/codemods/__tests__/4.0.0-lite-mode.ts

@@ -0,0 +1,109 @@
+jest.autoMockOff();
+
+import transformer from '../4.0.0-lite-mode';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Update ref prop', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+      import React, { useRef } from 'react';
+      import Range from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        const inputRef = (newRef) => {
+          ref = newRef;
+        }
+        return <Range inputRef={inputRef} />;
+      }
+    `,
+    `
+      import React, { useRef } from 'react';
+      import Range from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        const inputRef = (newRef) => {
+          ref = newRef;
+        }
+        return <Range ref={inputRef} />;
+      }
+    `,
+    'should replace inputRef with ref',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+      import React, { useRef } from 'react';
+      import Range from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        return (
+          <Range
+            inputRef={newRef => {
+              ref = newRef;
+            }}
+          />
+        );
+      }
+    `,
+    `
+      import React, { useRef } from 'react';
+      import Range from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        return (
+          <Range
+            ref={newRef => {
+              ref = newRef;
+            }}
+          />
+        );
+      }
+    `,
+    'should replace inputRef with ref when defined inline',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+      import React, { useRef } from 'react';
+      import Foo from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        const inputRef = (newRef) => {
+          ref = newRef;
+        }
+        return <Foo inputRef={inputRef} />;
+      }
+    `,
+    `
+      import React, { useRef } from 'react';
+      import Foo from '@atlaskit/range';
+
+      const SimpleRange = () => {
+        let ref = useRef();
+
+        const inputRef = (newRef) => {
+          ref = newRef;
+        }
+        return <Foo ref={inputRef} />;
+      }
+    `,
+    'should change inputRef with aliased import name',
+  );
+});

package/constellation/index/examples.mdx

@@ -0,0 +1,39 @@
+---
+order: 0
+---
+
+import RangeDefault from '../../examples/constellation/range-default';
+import RangeForm from '../../examples/constellation/range-form';
+import RangeControlled from '../../examples/constellation/range-controlled';
+import RangeUncontrolled from '../../examples/constellation/range-uncontrolled';
+import RangeDisabled from '../../examples/constellation/range-disabled';
+
+## Default
+
+The default form of a range.
+
+<Example Component={RangeDefault} packageName="@atlaskit/range" />
+
+## Form
+
+Range used with the [Form](https://atlaskit.atlassian.com/packages/design-system/form) component.
+
+<Example Component={RangeForm} packageName="@atlaskit/range" />
+
+## Controlled
+
+In a controlled range, the state is managed by the React component. Use the `onChange` handler to set the value.
+
+<Example Component={RangeControlled} packageName="@atlaskit/range" />
+
+## Uncontrolled
+
+In an uncontrolled range, the state is managed by the DOM.
+
+<Example Component={RangeUncontrolled} packageName="@atlaskit/range" />
+
+## Disabled
+
+Set `isDisabled` to disable a range when another action has to be completed before the range is usable.
+
+<Example Component={RangeDisabled} packageName="@atlaskit/range" />

package/constellation/index/props.mdx

@@ -0,0 +1,5 @@
+import RangeProps from '!!extract-react-types-loader!../../extract-react-types/range-props';
+
+<PropsTable heading="" props={RangeProps} />
+
+Additional `input` attributes are available. See <a rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range" target="_blank">MDN documentation</a> for more information.

package/constellation/index/usage.mdx

@@ -0,0 +1,31 @@
+---
+order: 2
+---
+
+## Usage
+
+Use ranges in [forms](/patterns/forms) to let users select a value within a given range of minimum and maximum values.
+
+## Anatomy
+
+![Range anatomy](images/range-anatomy.png)
+
+1. **Track:** The track displays the range available for the user to select from.
+2. **Handle:** A position indicator that can be moved along the track to change the value.
+
+## Best practices
+
+- Place labels directly above the input, and align to the left.
+- Do not use for ranges that are extremely large (for example, 1-1000).
+- Do not use for ranges that are very small (for example, 1-3). The range moves in steps when the range of values is lower.
+- Don't use a range if choosing a *specific* value is important. The slider interaction isn't as precise as explicitly typing or choosing an option from a list.
+
+
+## Content guidelines
+
+- Field label text above the range input should be short and concise.
+- If necessary, use helper text to clarify how to use the range.
+
+## Related
+
+- Ranges are used in [forms](/patterns/forms).

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _range.default;
+  }
+});
+
+var _range = _interopRequireDefault(require("./range"));

package/dist/cjs/range.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styled = require("./styled");
+
+var _theme = require("./theme");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var snapToStep = function snapToStep(value, min, step) {
+  // Normalise the value to allow for division properly with different min values
+  var adjustedValue = value - min; // Find the number of steps the value covers
+
+  var numSteps = Math.round(adjustedValue / step); // Convert numSteps back into original range
+
+  return numSteps * step + min;
+};
+
+var getRoundedPercentValue = function getRoundedPercentValue(value, min, max, step) {
+  var percent = '0';
+
+  if (min < max && value > min) {
+    var snappedValue = snapToStep(value, min, step);
+    percent = ((snappedValue - min) / (max - min) * 100).toFixed(2);
+  }
+
+  return percent;
+};
+
+var noop = function noop() {};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
+  var _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      _props$defaultValue = props.defaultValue,
+      defaultValue = _props$defaultValue === void 0 ? 50 : _props$defaultValue,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? noop : _props$onChange,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      propsValue = props.value,
+      theme = props.theme,
+      testId = props.testId,
+      rest = (0, _objectWithoutProperties2.default)(props, ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"]);
+
+  var spreadProps = _objectSpread({
+    max: max,
+    min: min,
+    step: step,
+    ref: ref
+  }, rest);
+
+  var _useState = (0, _react.useState)(propsValue !== undefined ? propsValue : defaultValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = (0, _react.useCallback)(function (e) {
+    var newValue = Number(e.target.value);
+    setValue(newValue); // Note use of newValue to ensure up=to-date value is used
+
+    onChange(newValue);
+  }, [onChange]);
+  var renderValue = propsValue !== undefined ? propsValue : value;
+  var valuePercent = getRoundedPercentValue(renderValue, min, max, step);
+  return /*#__PURE__*/_react.default.createElement(_theme.Theme.Provider, {
+    value: theme
+  }, /*#__PURE__*/_react.default.createElement(_theme.Theme.Consumer, null, function (computedTheme) {
+    return /*#__PURE__*/_react.default.createElement(_styled.Input, (0, _extends2.default)({
+      type: "range",
+      disabled: isDisabled,
+      onChange: handleChange,
+      value: renderValue,
+      valuePercent: valuePercent,
+      "data-testid": testId
+    }, computedTheme, spreadProps));
+  }));
+});
+
+exports.default = _default;

package/dist/cjs/styled.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Input = exports.rangeInputStyle = exports.overallHeight = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _elevation = require("@atlaskit/theme/elevation");
+
+var _templateObject;
+
+var sliderThumbSize = 16;
+var sliderThumbBorderThickness = 2;
+var sliderLineThickness = 4;
+var transitionDuration = '0.2s';
+var sliderBorderRadius = sliderLineThickness / 2;
+var overallHeight = 40;
+exports.overallHeight = overallHeight;
+
+var getBackgroundGradient = function getBackgroundGradient(_ref) {
+  var lower = _ref.lower,
+      upper = _ref.upper;
+  return "\n    background: linear-gradient(".concat(lower, ", ").concat(lower, ") 0 / var(--range-inline-width) 100%\n      no-repeat ").concat(upper, ";\n    [dir='rtl'] & {\n      background-position: right;\n    }\n  ");
+}; // Thumb style
+
+
+var sliderThumbStyle = function sliderThumbStyle(_ref2) {
+  var thumb = _ref2.thumb;
+  return "\n    background: ".concat(thumb.default.background, ";\n    border: ").concat(sliderThumbBorderThickness, "px solid transparent;\n    border-radius: 50%;\n    height: ").concat(sliderThumbSize, "px;\n    width: ").concat(sliderThumbSize, "px;\n    box-sizing: border-box;\n    transition: border-color ").concat(transitionDuration, " ease-in-out;\n    ").concat((0, _elevation.e200)(), ";\n  ");
+}; // Track styles
+
+
+var sliderTrackStyle = "\n  border-radius: ".concat(sliderBorderRadius, "px;\n  border: 0;\n  cursor: pointer;\n  height: ").concat(sliderLineThickness, "px;\n  width: 100%;\n  transition: background-color ").concat(transitionDuration, " ease-in-out;\n"); // Range input styles
+
+var chromeRangeInputStyle = function chromeRangeInputStyle(tokens) {
+  return "\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -".concat((sliderThumbSize - sliderLineThickness) / 2, "px;\n    ").concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    ").concat(sliderTrackStyle, ";\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.default), ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.hover), ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ").concat(getBackgroundGradient(tokens.track.disabled), "\n    cursor: not-allowed;\n  }\n  ");
+};
+
+var firefoxRangeInputStyle = function firefoxRangeInputStyle(tokens) {
+  return "\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-moz-range-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-moz-range-progress {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.lower, ";\n  }\n\n  &::-moz-range-track {\n    ").concat(sliderTrackStyle, ";\n    background: ").concat(tokens.track.default.upper, ";\n  }\n\n  &:active::-moz-range-progress,\n  &:hover::-moz-range-progress {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-moz-range-progress {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-moz-range-track {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+};
+
+var IERangeInputStyle = function IERangeInputStyle(tokens) {
+  return "\n  &::-ms-thumb {\n    margin-top: 0;\n    ".concat(sliderThumbStyle(tokens), ";\n  }\n\n  &:focus::-ms-thumb {\n    border-color: ").concat(tokens.thumb.focus.border, ";\n  }\n\n  &:disabled::-ms-thumb {\n    cursor: not-allowed;\n    box-shadow: 0 0 1px ").concat(tokens.thumb.disabled.boxShadow, ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ").concat(sliderLineThickness, "px;\n    transition: background-color ").concat(transitionDuration, " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ").concat(tokens.track.default.lower, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ").concat(tokens.track.default.upper, ";\n    border-radius: ").concat(sliderBorderRadius, "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ").concat(tokens.track.hover.lower, ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ").concat(tokens.track.hover.upper, ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ").concat(tokens.track.disabled.lower, ";\n    cursor: not-allowed;\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ").concat(tokens.track.disabled.upper, ";\n    cursor: not-allowed;\n  }\n");
+}; // Styles are split per browser as they are implemented differently
+// Cannot consolidate as Chrome & Firefox don't recognise styles if they are grouped
+// with CSS selectors they don't recognise, e.g. &::-ms-thumb
+
+
+var rangeInputStyle = function rangeInputStyle(tokens) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n    background: transparent; /* Otherwise white in Chrome */\n    height: ", "px; /* Otherwise thumb will collide with previous box element */\n    padding: 0; /* IE11 includes padding, this normalises it */\n    width: 100%; /* Specific width is required for Firefox. */\n\n    &:focus {\n      outline: none;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n\n    ", "\n    ", "\n    ", ";\n\n    font-family: ", ";\n\n    background-position: right;\n  "])), overallHeight, chromeRangeInputStyle(tokens), firefoxRangeInputStyle(tokens), IERangeInputStyle(tokens), (0, _constants.fontFamily)());
+};
+
+exports.rangeInputStyle = rangeInputStyle;
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var valuePercent = props.valuePercent,
+      thumb = props.thumb,
+      track = props.track,
+      style = props.style,
+      strippedProps = (0, _objectWithoutProperties2.default)(props, ["valuePercent", "thumb", "track", "style"]); // Note: emotion will cache unique outputs as their own this
+  // We are memoizing the creation of this string
+
+  var styles = (0, _react.useMemo)(function () {
+    return rangeInputStyle({
+      track: track,
+      thumb: thumb
+    });
+  }, [thumb, track]); // We are creating a css variable to control the "progress" portion of the range input
+  // This avoids us needing to create a new css class for each new percentage value
+
+  return (0, _core.jsx)("input", (0, _extends2.default)({}, strippedProps, {
+    style: {
+      '--range-inline-width': "".concat(valuePercent, "%")
+    },
+    ref: ref,
+    css: styles
+  }));
+});
+exports.Input = Input;
+Input.displayName = 'InputRange';