@atlaskit/range 5.0.11

package/dist/cjs/theme.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Theme = exports.track = exports.thumb = void 0;
+
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+
+var _components = require("@atlaskit/theme/components");
+
+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: colors.N0,
+    // This border color is not being used - awaiting focus state lift to props
+    border: colors.N800
+  },
+  disabled: {
+    boxShadow: colors.N60A
+  },
+  focus: {
+    // This border color is not being used - awaiting focus state lift to props
+    background: colors.N0,
+    border: colors.B200
+  }
+};
+exports.thumb = thumb;
+var track = {
+  background: colors.N30A,
+  default: {
+    lower: colors.B400,
+    upper: colors.N30
+  },
+  disabled: {
+    lower: colors.N50,
+    upper: colors.N30
+  },
+  hover: {
+    lower: colors.B300,
+    upper: colors.N40
+  }
+};
+exports.track = track;
+var Theme = (0, _components.createTheme)(function () {
+  return {
+    thumb: thumb,
+    track: track
+  };
+});
+exports.Theme = Theme;

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default } from './range';

package/dist/es2019/range.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef, useCallback, useState } from 'react';
+import { Input } from './styled';
+import { Theme } from './theme';
+
+const snapToStep = (value, min, step) => {
+  // Normalise the value to allow for division properly with different min values
+  const adjustedValue = value - min; // Find the number of steps the value covers
+
+  const numSteps = Math.round(adjustedValue / step); // Convert numSteps back into original range
+
+  return numSteps * step + min;
+};
+
+const getRoundedPercentValue = (value, min, max, step) => {
+  let percent = '0';
+
+  if (min < max && value > min) {
+    const snappedValue = snapToStep(value, min, step);
+    percent = ((snappedValue - min) / (max - min) * 100).toFixed(2);
+  }
+
+  return percent;
+};
+
+const noop = () => {};
+
+export default /*#__PURE__*/forwardRef(function Range(props, ref) {
+  const {
+    isDisabled = false,
+    defaultValue = 50,
+    max = 100,
+    min = 0,
+    onChange = noop,
+    step = 1,
+    value: propsValue,
+    theme,
+    testId,
+    ...rest
+  } = props;
+  const spreadProps = {
+    max,
+    min,
+    step,
+    ref,
+    ...rest
+  };
+  const [value, setValue] = useState(propsValue !== undefined ? propsValue : defaultValue);
+  const handleChange = useCallback(e => {
+    const newValue = Number(e.target.value);
+    setValue(newValue); // Note use of newValue to ensure up=to-date value is used
+
+    onChange(newValue);
+  }, [onChange]);
+  const renderValue = propsValue !== undefined ? propsValue : value;
+  const valuePercent = getRoundedPercentValue(renderValue, min, max, step);
+  return /*#__PURE__*/React.createElement(Theme.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(Theme.Consumer, null, computedTheme => /*#__PURE__*/React.createElement(Input, _extends({
+    type: "range",
+    disabled: isDisabled,
+    onChange: handleChange,
+    value: renderValue,
+    valuePercent: valuePercent,
+    "data-testid": testId
+  }, computedTheme, spreadProps))));
+});

package/dist/es2019/styled.js

@@ -0,0 +1,255 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+
+/* eslint-disable no-mixed-operators */
+import { forwardRef, useMemo } from 'react';
+import { css, jsx } from '@emotion/core';
+import { fontFamily } from '@atlaskit/theme/constants';
+import { e200 } from '@atlaskit/theme/elevation';
+const sliderThumbSize = 16;
+const sliderThumbBorderThickness = 2;
+const sliderLineThickness = 4;
+const transitionDuration = '0.2s';
+const sliderBorderRadius = sliderLineThickness / 2;
+export const overallHeight = 40;
+
+const getBackgroundGradient = ({
+  lower,
+  upper
+}) => `
+    background: linear-gradient(${lower}, ${lower}) 0 / var(--range-inline-width) 100%
+      no-repeat ${upper};
+    [dir='rtl'] & {
+      background-position: right;
+    }
+  `; // Thumb style
+
+
+const sliderThumbStyle = ({
+  thumb
+}) => {
+  return `
+    background: ${thumb.default.background};
+    border: ${sliderThumbBorderThickness}px solid transparent;
+    border-radius: 50%;
+    height: ${sliderThumbSize}px;
+    width: ${sliderThumbSize}px;
+    box-sizing: border-box;
+    transition: border-color ${transitionDuration} ease-in-out;
+    ${e200()};
+  `;
+}; // Track styles
+
+
+const sliderTrackStyle = `
+  border-radius: ${sliderBorderRadius}px;
+  border: 0;
+  cursor: pointer;
+  height: ${sliderLineThickness}px;
+  width: 100%;
+  transition: background-color ${transitionDuration} ease-in-out;
+`; // Range input styles
+
+const chromeRangeInputStyle = tokens => {
+  return `
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -${(sliderThumbSize - sliderLineThickness) / 2}px;
+    ${sliderThumbStyle(tokens)};
+  }
+
+  &:focus::-webkit-slider-thumb {
+    border-color: ${tokens.thumb.focus.border};
+  }
+
+  &:disabled::-webkit-slider-thumb {
+    cursor: not-allowed;
+    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+  }
+
+  &::-webkit-slider-runnable-track {
+    ${sliderTrackStyle};
+    ${getBackgroundGradient(tokens.track.default)};
+  }
+
+  &:focus::-webkit-slider-runnable-track {
+    ${getBackgroundGradient(tokens.track.default)};
+  }
+
+  &:active::-webkit-slider-runnable-track,
+  &:hover::-webkit-slider-runnable-track {
+    ${getBackgroundGradient(tokens.track.hover)};
+  }
+
+  &:disabled::-webkit-slider-runnable-track {
+    ${getBackgroundGradient(tokens.track.disabled)}
+    cursor: not-allowed;
+  }
+  `;
+};
+
+const firefoxRangeInputStyle = tokens => {
+  return `
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-moz-range-thumb {
+    ${sliderThumbStyle(tokens)};
+  }
+
+  &:focus::-moz-range-thumb {
+    border-color: ${tokens.thumb.focus.border};
+  }
+
+  &:disabled::-moz-range-thumb {
+    cursor: not-allowed;
+    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+  }
+
+  &::-moz-range-progress {
+    ${sliderTrackStyle};
+    background: ${tokens.track.default.lower};
+  }
+
+  &::-moz-range-track {
+    ${sliderTrackStyle};
+    background: ${tokens.track.default.upper};
+  }
+
+  &:active::-moz-range-progress,
+  &:hover::-moz-range-progress {
+    background: ${tokens.track.hover.lower};
+  }
+
+  &:active::-moz-range-track,
+  &:hover::-moz-range-track {
+    background: ${tokens.track.hover.upper};
+  }
+
+  &:disabled::-moz-range-progress {
+    background: ${tokens.track.disabled.lower};
+    cursor: not-allowed;
+  }
+
+  &:disabled::-moz-range-track {
+    background: ${tokens.track.disabled.upper};
+    cursor: not-allowed;
+  }
+`;
+};
+
+const IERangeInputStyle = tokens => {
+  return `
+  &::-ms-thumb {
+    margin-top: 0;
+    ${sliderThumbStyle(tokens)};
+  }
+
+  &:focus::-ms-thumb {
+    border-color: ${tokens.thumb.focus.border};
+  }
+
+  &:disabled::-ms-thumb {
+    cursor: not-allowed;
+    box-shadow: 0 0 1px ${tokens.thumb.disabled.boxShadow};
+  }
+
+  &::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+    cursor: pointer;
+    height: ${sliderLineThickness}px;
+    transition: background-color ${transitionDuration} ease-in-out;
+    width: 100%;
+  }
+
+  &::-ms-fill-lower {
+    background: ${tokens.track.default.lower};
+    border-radius: ${sliderBorderRadius}px;
+    border: 0;
+  }
+
+  &::-ms-fill-upper {
+    background: ${tokens.track.default.upper};
+    border-radius: ${sliderBorderRadius}px;
+    border: 0;
+  }
+
+  &:active::-ms-fill-lower,
+  &:hover::-ms-fill-lower {
+    background: ${tokens.track.hover.lower};
+  }
+
+  &:active::-ms-fill-upper,
+  &:hover::-ms-fill-upper {
+    background: ${tokens.track.hover.upper};
+  }
+
+  &:disabled::-ms-fill-lower {
+    background: ${tokens.track.disabled.lower};
+    cursor: not-allowed;
+  }
+
+  &:disabled::-ms-fill-upper {
+    background: ${tokens.track.disabled.upper};
+    cursor: not-allowed;
+  }
+`;
+}; // 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
+
+
+export const rangeInputStyle = tokens => {
+  return css`
+    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+    background: transparent; /* Otherwise white in Chrome */
+    height: ${overallHeight}px; /* Otherwise thumb will collide with previous box element */
+    padding: 0; /* IE11 includes padding, this normalises it */
+    width: 100%; /* Specific width is required for Firefox. */
+
+    &:focus {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    ${chromeRangeInputStyle(tokens)}
+    ${firefoxRangeInputStyle(tokens)}
+    ${IERangeInputStyle(tokens)};
+
+    font-family: ${fontFamily()};
+
+    background-position: right;
+  `;
+};
+export const Input = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    valuePercent,
+    thumb,
+    track,
+    style,
+    ...strippedProps
+  } = props; // Note: emotion will cache unique outputs as their own this
+  // We are memoizing the creation of this string
+
+  const styles = useMemo(() => rangeInputStyle({
+    track,
+    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 jsx("input", _extends({}, strippedProps, {
+    style: {
+      '--range-inline-width': `${valuePercent}%`
+    },
+    ref: ref,
+    css: styles
+  }));
+});
+Input.displayName = 'InputRange';

package/dist/es2019/theme.js

@@ -0,0 +1,36 @@
+import * as colors from '@atlaskit/theme/colors';
+import { createTheme } from '@atlaskit/theme/components';
+export const thumb = {
+  default: {
+    background: colors.N0,
+    // This border color is not being used - awaiting focus state lift to props
+    border: colors.N800
+  },
+  disabled: {
+    boxShadow: colors.N60A
+  },
+  focus: {
+    // This border color is not being used - awaiting focus state lift to props
+    background: colors.N0,
+    border: colors.B200
+  }
+};
+export const track = {
+  background: colors.N30A,
+  default: {
+    lower: colors.B400,
+    upper: colors.N30
+  },
+  disabled: {
+    lower: colors.N50,
+    upper: colors.N30
+  },
+  hover: {
+    lower: colors.B300,
+    upper: colors.N40
+  }
+};
+export const Theme = createTheme(() => ({
+  thumb,
+  track
+}));

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default } from './range';

package/dist/esm/range.js

@@ -0,0 +1,86 @@
+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";
+
+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) { _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; }
+
+import React, { forwardRef, useCallback, useState } from 'react';
+import { Input } from './styled';
+import { Theme } from './theme';
+
+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() {};
+
+export default /*#__PURE__*/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 = _objectWithoutProperties(props, ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "theme", "testId"]);
+
+  var spreadProps = _objectSpread({
+    max: max,
+    min: min,
+    step: step,
+    ref: ref
+  }, rest);
+
+  var _useState = useState(propsValue !== undefined ? propsValue : defaultValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var handleChange = 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.createElement(Theme.Provider, {
+    value: theme
+  }, /*#__PURE__*/React.createElement(Theme.Consumer, null, function (computedTheme) {
+    return /*#__PURE__*/React.createElement(Input, _extends({
+      type: "range",
+      disabled: isDisabled,
+      onChange: handleChange,
+      value: renderValue,
+      valuePercent: valuePercent,
+      "data-testid": testId
+    }, computedTheme, spreadProps));
+  }));
+});