@atlaskit/range 5.1.0 → 5.1.4

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/range
 
+## 5.1.4
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
+- Updated dependencies
+
+## 5.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.2
+
+### Patch Changes
+
+- [`c55c736ecea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c55c736ecea) - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
+
+## 5.1.1
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/cjs/range.js

@@ -23,13 +23,15 @@ var _styled = require("./styled");
 
 var _theme = require("./theme");
 
+var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"];
+
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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
@@ -69,7 +71,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function Range(props, ref) {
       propsValue = props.value,
       theme = props.theme,
       testId = props.testId,
-      rest = (0, _objectWithoutProperties2.default)(props, ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var spreadProps = _objectSpread({
     max: max,

package/dist/cjs/styled.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = exports.rangeInputStyle = exports.overallHeight = void 0;
+exports.rangeInputStyle = exports.overallHeight = exports.Input = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,7 +21,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _tokens = require("@atlaskit/tokens");
+var _excluded = ["valuePercent", "thumb", "track", "style"];
 
 var _templateObject;
 
@@ -39,7 +39,7 @@ var getBackgroundGradient = function getBackgroundGradient(_ref) {
   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  ");
 };
 
-var elevationStyle = (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)); // Thumb style
+var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"); // Thumb style
 
 var sliderThumbStyle = function sliderThumbStyle(_ref2) {
   var thumb = _ref2.thumb;
@@ -74,7 +74,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       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
+      strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded); // Note: emotion will cache unique outputs as their own this
   // We are memoizing the creation of this string
 
   var styles = (0, _react.useMemo)(function () {

package/dist/cjs/theme.js

@@ -5,43 +5,41 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Theme = exports.track = exports.thumb = void 0;
+exports.track = exports.thumb = exports.Theme = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
-var _tokens = require("@atlaskit/tokens");
-
 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; }
 
 var thumb = {
   default: {
-    background: (0, _tokens.token)('color.background.card', colors.N0)
+    background: "var(--ds-surface-raised, ".concat(colors.N0, ")")
   },
   disabled: {
-    boxShadow: (0, _tokens.token)('shadow.card', "0 0 1px ".concat(colors.N60A))
+    boxShadow: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
   },
   focus: {
-    background: (0, _tokens.token)('color.background.boldNeutral.resting', colors.N0),
-    border: (0, _tokens.token)('color.border.focus', colors.B200)
+    background: "var(--ds-background-neutral-bold, ".concat(colors.N0, ")"),
+    border: "var(--ds-border-focused, ".concat(colors.B200, ")")
   }
 };
 exports.thumb = thumb;
 var track = {
   default: {
-    lower: (0, _tokens.token)('color.background.boldBrand.resting', colors.B400),
-    upper: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N30)
+    lower: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
+    upper: "var(--ds-background-neutral, ".concat(colors.N30, ")")
   },
   disabled: {
-    lower: (0, _tokens.token)('color.text.disabled', colors.N50),
-    upper: (0, _tokens.token)('color.background.disabled', colors.N30)
+    lower: "var(--ds-text-disabled, ".concat(colors.N50, ")"),
+    upper: "var(--ds-background-disabled, ".concat(colors.N30, ")")
   },
   hover: {
-    lower: (0, _tokens.token)('color.background.boldBrand.hover', colors.B300),
-    upper: (0, _tokens.token)('color.background.subtleNeutral.hover', colors.N40)
+    lower: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
+    upper: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")")
   }
 };
 exports.track = track;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.1.0",
+	"version": "5.1.4",
 	"sideEffects": false
 }

package/dist/es2019/styled.js

@@ -7,7 +7,6 @@ import { forwardRef, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { N50A, N60A } from '@atlaskit/theme/colors';
 import { fontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 const sliderThumbSize = 16;
 const sliderThumbBorderThickness = 2;
 const sliderLineThickness = 4;
@@ -26,7 +25,7 @@ const getBackgroundGradient = ({
     }
   `;
 
-const elevationStyle = token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`); // Thumb style
+const elevationStyle = `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`; // Thumb style
 
 const sliderThumbStyle = ({
   thumb

package/dist/es2019/theme.js

@@ -1,30 +1,29 @@
 import * as colors from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export const thumb = {
   default: {
-    background: token('color.background.card', colors.N0)
+    background: `var(--ds-surface-raised, ${colors.N0})`
   },
   disabled: {
-    boxShadow: token('shadow.card', `0 0 1px ${colors.N60A}`)
+    boxShadow: `var(--ds-shadow-raised, ${`0 0 1px ${colors.N60A}`})`
   },
   focus: {
-    background: token('color.background.boldNeutral.resting', colors.N0),
-    border: token('color.border.focus', colors.B200)
+    background: `var(--ds-background-neutral-bold, ${colors.N0})`,
+    border: `var(--ds-border-focused, ${colors.B200})`
   }
 };
 export const track = {
   default: {
-    lower: token('color.background.boldBrand.resting', colors.B400),
-    upper: token('color.background.subtleNeutral.resting', colors.N30)
+    lower: `var(--ds-background-brand-bold, ${colors.B400})`,
+    upper: `var(--ds-background-neutral, ${colors.N30})`
   },
   disabled: {
-    lower: token('color.text.disabled', colors.N50),
-    upper: token('color.background.disabled', colors.N30)
+    lower: `var(--ds-text-disabled, ${colors.N50})`,
+    upper: `var(--ds-background-disabled, ${colors.N30})`
   },
   hover: {
-    lower: token('color.background.boldBrand.hover', colors.B300),
-    upper: token('color.background.subtleNeutral.hover', colors.N40)
+    lower: `var(--ds-background-brand-bold-hovered, ${colors.B300})`,
+    upper: `var(--ds-background-neutral-hovered, ${colors.N40})`
   }
 };
 export const Theme = createTheme(() => ({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.1.0",
+	"version": "5.1.4",
 	"sideEffects": false
 }

package/dist/esm/range.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"];
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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) { _defineProperty(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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React, { forwardRef, useCallback, useState } from 'react';
 import { Input } from './styled';
@@ -49,7 +50,7 @@ export default /*#__PURE__*/forwardRef(function Range(props, ref) {
       propsValue = props.value,
       theme = props.theme,
       testId = props.testId,
-      rest = _objectWithoutProperties(props, ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var spreadProps = _objectSpread({
     max: max,

package/dist/esm/styled.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["valuePercent", "thumb", "track", "style"];
 
 var _templateObject;
 
@@ -11,7 +12,6 @@ import { forwardRef, useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import { N50A, N60A } from '@atlaskit/theme/colors';
 import { fontFamily } from '@atlaskit/theme/constants';
-import { token } from '@atlaskit/tokens';
 var sliderThumbSize = 16;
 var sliderThumbBorderThickness = 2;
 var sliderLineThickness = 4;
@@ -25,7 +25,7 @@ var getBackgroundGradient = function getBackgroundGradient(_ref) {
   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  ");
 };
 
-var elevationStyle = token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)); // Thumb style
+var elevationStyle = "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"); // Thumb style
 
 var sliderThumbStyle = function sliderThumbStyle(_ref2) {
   var thumb = _ref2.thumb;
@@ -58,7 +58,7 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       thumb = props.thumb,
       track = props.track,
       style = props.style,
-      strippedProps = _objectWithoutProperties(props, ["valuePercent", "thumb", "track", "style"]); // Note: emotion will cache unique outputs as their own this
+      strippedProps = _objectWithoutProperties(props, _excluded); // Note: emotion will cache unique outputs as their own this
   // We are memoizing the creation of this string
 
 

package/dist/esm/theme.js

@@ -1,30 +1,29 @@
 import * as colors from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { token } from '@atlaskit/tokens';
 export var thumb = {
   default: {
-    background: token('color.background.card', colors.N0)
+    background: "var(--ds-surface-raised, ".concat(colors.N0, ")")
   },
   disabled: {
-    boxShadow: token('shadow.card', "0 0 1px ".concat(colors.N60A))
+    boxShadow: "var(--ds-shadow-raised, ".concat("0 0 1px ".concat(colors.N60A), ")")
   },
   focus: {
-    background: token('color.background.boldNeutral.resting', colors.N0),
-    border: token('color.border.focus', colors.B200)
+    background: "var(--ds-background-neutral-bold, ".concat(colors.N0, ")"),
+    border: "var(--ds-border-focused, ".concat(colors.B200, ")")
   }
 };
 export var track = {
   default: {
-    lower: token('color.background.boldBrand.resting', colors.B400),
-    upper: token('color.background.subtleNeutral.resting', colors.N30)
+    lower: "var(--ds-background-brand-bold, ".concat(colors.B400, ")"),
+    upper: "var(--ds-background-neutral, ".concat(colors.N30, ")")
   },
   disabled: {
-    lower: token('color.text.disabled', colors.N50),
-    upper: token('color.background.disabled', colors.N30)
+    lower: "var(--ds-text-disabled, ".concat(colors.N50, ")"),
+    upper: "var(--ds-background-disabled, ".concat(colors.N30, ")")
   },
   hover: {
-    lower: token('color.background.boldBrand.hover', colors.B300),
-    upper: token('color.background.subtleNeutral.hover', colors.N40)
+    lower: "var(--ds-background-brand-bold-hovered, ".concat(colors.B300, ")"),
+    upper: "var(--ds-background-neutral-hovered, ".concat(colors.N40, ")")
   }
 };
 export var Theme = createTheme(function () {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/range",
-	"version": "5.1.0",
+	"version": "5.1.4",
 	"sideEffects": false
 }

package/dist/types/theme.d.ts

@@ -23,28 +23,28 @@ export interface ThemeTokens {
 }
 export declare const thumb: {
     default: {
-        background: "var(--ds-background-card)";
+        background: "var(--ds-surface-raised)";
     };
     disabled: {
-        boxShadow: "var(--ds-card)";
+        boxShadow: "var(--ds-shadow-raised)";
     };
     focus: {
-        background: "var(--ds-background-boldNeutral-resting)";
-        border: "var(--ds-border-focus)";
+        background: "var(--ds-background-neutral-bold)";
+        border: "var(--ds-border-focused)";
     };
 };
 export declare const track: {
     default: {
-        lower: "var(--ds-background-boldBrand-resting)";
-        upper: "var(--ds-background-subtleNeutral-resting)";
+        lower: "var(--ds-background-brand-bold)";
+        upper: "var(--ds-background-neutral)";
     };
     disabled: {
         lower: "var(--ds-text-disabled)";
         upper: "var(--ds-background-disabled)";
     };
     hover: {
-        lower: "var(--ds-background-boldBrand-hover)";
-        upper: "var(--ds-background-subtleNeutral-hover)";
+        lower: "var(--ds-background-brand-bold-hovered)";
+        upper: "var(--ds-background-neutral-hovered)";
     };
 };
 export declare const Theme: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/range",
-  "version": "5.1.0",
+  "version": "5.1.4",
   "description": "A range lets users choose an approximate value on a slider.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,15 +18,14 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Range"
     }
   },
   "dependencies": {
-    "@atlaskit/theme": "^12.0.0",
-    "@atlaskit/tokens": "^0.3.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,7 +33,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/checkbox": "^12.0.0",
     "@atlaskit/docs": "*",
@@ -48,7 +46,7 @@
     "@testing-library/react": "^8.0.1",
     "@types/jscodeshift": "^0.11.0",
     "jscodeshift": "^0.13.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
     "typescript": "3.9.6"