@artsy/palette 22.0.2 → 22.0.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v22.0.3 (Fri Jul 08 2022)
+
+#### 🐛  Bug Fix
+
+- chore: sync local state with `value` prop for `Range` component [#1192](https://github.com/artsy/palette/pull/1192) ([@dimatretyak](https://github.com/dimatretyak))
+- chore: sync local state with value prop ([@dimatretyak](https://github.com/dimatretyak))
+
+#### Authors: 1
+
+- Dima Tretyak (Dzmitry Tratsiak) ([@dimatretyak](https://github.com/dimatretyak))
+
+---
+
 # v22.0.2 (Thu Jun 30 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/Range/Range.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _helpers = require("../../helpers");
 
+var _utils = require("../../utils");
+
 var _remapValue = require("../../utils/remapValue");
 
 var _Box = require("../Box");
@@ -27,6 +29,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -99,7 +109,11 @@ var Range = function Range(_ref) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, []); // Sync local state with value prop
+
+  (0, _utils.useUpdateEffect)(function () {
+    setValues(value);
+  }, _toConsumableArray(value));
   var selectionRectangle = "rect(0, ".concat((0, _remapValue.remapValue)(values[1], {
     min: min,
     max: max

package/dist/elements/Range/Range.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","ariaLabels","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [min: number, max: number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1]) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0]) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    if (!maxRef.current) return\n    setMaxWidth(maxRef.current.offsetWidth)\n  }, [])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n\n      {/* Max slider is clipped so position a shadow independent of it */}\n      <Shadow\n        left={remapValue(\n          values[1],\n          { min, max },\n          { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n        )}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Shadow = styled(Box)`\n  position: absolute;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  top: 50%;\n  margin-top: -${RANGE_HANDLE_SIZE / 2}px;\n  background-color: transparent;\n  pointer-events: none;\n  border-radius: 50%;\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n\n  &:first-of-type {\n    &::-webkit-slider-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"file":"Range.js"}
+{"version":3,"sources":["../../../src/elements/Range/Range.tsx"],"names":["RANGE_HANDLE_SIZE","Range","ariaLabels","min","max","step","value","onChange","rest","minRef","maxRef","values","setValues","maxWidth","setMaxWidth","handleMinChange","target","valueAsNumber","handleMaxChange","current","offsetWidth","handleResize","window","addEventListener","passive","removeEventListener","selectionRectangle","maxRectangle","clip","Track","Flex","Shadow","Box","FLAT_SHADOW","Selection","railStyles","css","handleStyles","Slider","styled","input","defaultProps","type"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport * as React from \"react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { FLAT_SHADOW } from \"../../helpers\"\nimport { useUpdateEffect } from \"../../utils\"\nimport { remapValue } from \"../../utils/remapValue\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Flex } from \"../Flex\"\n\nexport const RANGE_HANDLE_SIZE = 24\n\nexport interface RangeProps extends BoxProps {\n  ariaLabels?: [string, string]\n  min: number\n  max: number\n  step: number\n  value?: number[]\n  onChange?: (range: [min: number, max: number]) => void\n}\n\nexport const Range: React.FC<RangeProps> = ({\n  ariaLabels,\n  min,\n  max,\n  step,\n  value = [0, max],\n  onChange,\n  ...rest\n}) => {\n  const minRef = useRef<HTMLInputElement | null>(null)\n  const maxRef = useRef<HTMLInputElement | null>(null)\n\n  const [values, setValues] = useState(value)\n\n  const [maxWidth, setMaxWidth] = useState(0)\n\n  const handleMinChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value > values[1]) return\n    setValues([value, values[1]])\n    onChange?.([value, values[1]])\n  }\n\n  const handleMaxChange = ({\n    target: { valueAsNumber: value },\n  }: React.ChangeEvent<HTMLInputElement>) => {\n    if (value < values[0]) return\n    setValues([values[0], value])\n    onChange?.([values[0], value])\n  }\n\n  useEffect(() => {\n    if (!maxRef.current) return\n    setMaxWidth(maxRef.current.offsetWidth)\n  }, [])\n\n  useEffect(() => {\n    const handleResize = () => {\n      if (!maxRef.current) return\n      setMaxWidth(maxRef.current.offsetWidth)\n    }\n\n    window.addEventListener(\"resize\", handleResize, { passive: true })\n\n    return () => {\n      window.removeEventListener(\"resize\", handleResize)\n    }\n  }, [])\n\n   // Sync local state with value prop\n   useUpdateEffect(() => {\n    setValues(value)\n  }, [...value])\n\n  const selectionRectangle = `rect(0, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px, 2px, ${remapValue(\n    values[0],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  const maxRectangle = `rect(0, ${maxWidth}px, ${RANGE_HANDLE_SIZE}px, ${remapValue(\n    values[1],\n    { min, max },\n    { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n  )}px)`\n\n  return (\n    <Track {...rest}>\n      <Selection style={{ clip: selectionRectangle }} />\n\n      <Slider\n        ref={minRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMinChange}\n        value={values[0]}\n        aria-label={ariaLabels?.[0]}\n      />\n\n      <Slider\n        ref={maxRef as any}\n        min={min}\n        max={max}\n        step={step}\n        onInput={handleMaxChange}\n        value={values[1]}\n        style={{ clip: maxRectangle }}\n        aria-label={ariaLabels?.[1]}\n      />\n\n      {/* Max slider is clipped so position a shadow independent of it */}\n      <Shadow\n        left={remapValue(\n          values[1],\n          { min, max },\n          { min: 0, max: maxWidth - RANGE_HANDLE_SIZE }\n        )}\n      />\n    </Track>\n  )\n}\n\nconst Track = styled(Flex)`\n  align-items: center;\n  position: relative;\n  height: ${RANGE_HANDLE_SIZE}px;\n\n  &:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 2px;\n    left: 0;\n    right: 0;\n    top: 50%;\n    margin-top: -1px;\n    background-color: ${themeGet(\"colors.black30\")};\n  }\n`\n\nconst Shadow = styled(Box)`\n  position: absolute;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  top: 50%;\n  margin-top: -${RANGE_HANDLE_SIZE / 2}px;\n  background-color: transparent;\n  pointer-events: none;\n  border-radius: 50%;\n  box-shadow: ${FLAT_SHADOW};\n`\n\nconst Selection = styled(Box)`\n  position: absolute;\n  height: 2px;\n  left: 0;\n  right: 0;\n  top: 50%;\n  margin-top: -1px;\n  background-color: ${themeGet(\"colors.brand\")};\n`\n\nconst railStyles = css`\n  width: 100%;\n  height: ${RANGE_HANDLE_SIZE}px;\n`\n\nconst handleStyles = css`\n  user-select: none;\n  cursor: grab;\n  width: ${RANGE_HANDLE_SIZE}px;\n  height: ${RANGE_HANDLE_SIZE}px;\n  background-color: ${themeGet(\"colors.white100\")};\n  border-radius: 50%;\n  border: 1px solid ${themeGet(\"colors.black10\")};\n`\n\nconst Slider = styled.input`\n  appearance: none;\n  background: transparent;\n  position: relative;\n  margin: 0;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n\n  &::-webkit-slider-runnable-track {\n    ${railStyles}\n  }\n\n  &::-moz-range-track {\n    ${railStyles}\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    ${handleStyles}\n  }\n\n  &::-moz-range-thumb {\n    ${handleStyles}\n  }\n\n  &:active {\n    &::-webkit-slider-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: none;\n      background-color: ${themeGet(\"colors.black5\")};\n    }\n  }\n\n  &:first-of-type {\n    &::-webkit-slider-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n\n    &::-moz-range-thumb {\n      box-shadow: ${FLAT_SHADOW};\n    }\n  }\n`\n\nSlider.defaultProps = {\n  type: \"range\",\n}\n"],"file":"Range.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "22.0.2",
+  "version": "22.0.3",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -177,5 +177,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "4a3f50a50e4efadcfde8c176bcc659bec9bdbc40"
+  "gitHead": "8a7e527eb4ee25bbd39a74fc5ef85151c191f967"
 }