@artsy/palette 31.6.0 → 31.6.2

package/dist/elements/FilterSelect/Components/FilterSelectResultItem.js

@@ -11,19 +11,23 @@ var _Checkbox = require("../../Checkbox");
 
 var _FilterSelectContext = require("./FilterSelectContext");
 
+var _Radio = require("../../Radio");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var FilterSelectResultItem = function FilterSelectResultItem(props) {
   var _useFilterSelectConte = (0, _FilterSelectContext.useFilterSelectContext)(),
       renderItemLabel = _useFilterSelectConte.renderItemLabel,
       selectedItems = _useFilterSelectConte.selectedItems,
-      toggleSelectedItem = _useFilterSelectConte.toggleSelectedItem;
+      toggleSelectedItem = _useFilterSelectConte.toggleSelectedItem,
+      multiselect = _useFilterSelectConte.multiselect;
 
   var isSelected = !!selectedItems.find(function (item) {
     return item.value === props.value;
   });
   var label = renderItemLabel ? renderItemLabel(props) : props.label;
-  return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+  var Component = multiselect ? _Checkbox.Checkbox : _Radio.Radio;
+  return /*#__PURE__*/_react.default.createElement(Component, {
     onSelect: function onSelect() {
       return toggleSelectedItem(props);
     },

package/dist/elements/FilterSelect/Components/FilterSelectResultItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterSelectResultItem.tsx"],"names":["FilterSelectResultItem","props","renderItemLabel","selectedItems","toggleSelectedItem","isSelected","find","item","value","label"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,IAAMA,sBAAsC,GAAG,SAAzCA,sBAAyC,CAACC,KAAD,EAAW;AAC/D,8BAII,kDAJJ;AAAA,MACEC,eADF,yBACEA,eADF;AAAA,MAEEC,aAFF,yBAEEA,aAFF;AAAA,MAGEC,kBAHF,yBAGEA,kBAHF;;AAMA,MAAMC,UAAU,GAAG,CAAC,CAACF,aAAa,CAACG,IAAd,CACnB,UAACC,IAAD;AAAA,WAAgBA,IAAI,CAACC,KAAL,KAAeP,KAAK,CAACO,KAArC;AAAA,GADmB,CAArB;AAGA,MAAMC,KAAK,GAAGP,eAAe,GAAGA,eAAe,CAACD,KAAD,CAAlB,GAA4BA,KAAK,CAACQ,KAA/D;AAEA,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAE;AAAA,aAAML,kBAAkB,CAACH,KAAD,CAAxB;AAAA,KADZ;AAEE,IAAA,QAAQ,EAAEI,UAFZ;AAGE,IAAA,GAAG,EAAEJ,KAAK,CAACO,KAHb;AAIE,IAAA,EAAE,EAAE;AAJN,KAMGC,KANH,CADF;AAUD,CAtBM;;;AAAMT,sB","sourcesContent":["import React from \"react\"\nimport { Checkbox } from \"../../Checkbox\"\nimport { Item, useFilterSelectContext } from \"./FilterSelectContext\"\n\nexport const FilterSelectResultItem: React.FC<Item> = (props) => {\n  const {\n    renderItemLabel,\n    selectedItems,\n    toggleSelectedItem,\n  } = useFilterSelectContext()\n\n  const isSelected = !!selectedItems.find(\n    (item: Item) => item.value === props.value\n  )\n  const label = renderItemLabel ? renderItemLabel(props) : props.label\n\n  return (\n    <Checkbox\n      onSelect={() => toggleSelectedItem(props)}\n      selected={isSelected}\n      key={props.value}\n      my={1}\n    >\n      {label}\n    </Checkbox>\n  )\n}\n"],"file":"FilterSelectResultItem.js"}
+{"version":3,"sources":["../../../../src/elements/FilterSelect/Components/FilterSelectResultItem.tsx"],"names":["FilterSelectResultItem","props","renderItemLabel","selectedItems","toggleSelectedItem","multiselect","isSelected","find","item","value","label","Component","Checkbox","Radio"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEO,IAAMA,sBAAsC,GAAG,SAAzCA,sBAAyC,CAACC,KAAD,EAAW;AAC/D,8BAKI,kDALJ;AAAA,MACEC,eADF,yBACEA,eADF;AAAA,MAEEC,aAFF,yBAEEA,aAFF;AAAA,MAGEC,kBAHF,yBAGEA,kBAHF;AAAA,MAIEC,WAJF,yBAIEA,WAJF;;AAOA,MAAMC,UAAU,GAAG,CAAC,CAACH,aAAa,CAACI,IAAd,CACnB,UAACC,IAAD;AAAA,WAAgBA,IAAI,CAACC,KAAL,KAAeR,KAAK,CAACQ,KAArC;AAAA,GADmB,CAArB;AAGA,MAAMC,KAAK,GAAGR,eAAe,GAAGA,eAAe,CAACD,KAAD,CAAlB,GAA4BA,KAAK,CAACS,KAA/D;AACA,MAAMC,SAAS,GAAGN,WAAW,GAAGO,kBAAH,GAAcC,YAA3C;AAEA,sBACE,6BAAC,SAAD;AACE,IAAA,QAAQ,EAAE;AAAA,aAAMT,kBAAkB,CAACH,KAAD,CAAxB;AAAA,KADZ;AAEE,IAAA,QAAQ,EAAEK,UAFZ;AAGE,IAAA,GAAG,EAAEL,KAAK,CAACQ,KAHb;AAIE,IAAA,EAAE,EAAE;AAJN,KAMGC,KANH,CADF;AAUD,CAxBM;;;AAAMV,sB","sourcesContent":["import React from \"react\"\nimport { Checkbox } from \"../../Checkbox\"\nimport { Item, useFilterSelectContext } from \"./FilterSelectContext\"\nimport { Radio } from \"../../Radio\"\n\nexport const FilterSelectResultItem: React.FC<Item> = (props) => {\n  const {\n    renderItemLabel,\n    selectedItems,\n    toggleSelectedItem,\n    multiselect,\n  } = useFilterSelectContext()\n\n  const isSelected = !!selectedItems.find(\n    (item: Item) => item.value === props.value\n  )\n  const label = renderItemLabel ? renderItemLabel(props) : props.label\n  const Component = multiselect ? Checkbox : Radio\n\n  return (\n    <Component\n      onSelect={() => toggleSelectedItem(props)}\n      selected={isSelected}\n      key={props.value}\n      my={1}\n    >\n      {label}\n    </Component>\n  )\n}\n"],"file":"FilterSelectResultItem.js"}

package/dist/elements/FilterSelect/FilterSelect.story.js

@@ -22,11 +22,14 @@ exports.default = _default;
 
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{}]
+    states: [{
+      multiselect: true
+    }, {
+      multiselect: false
+    }]
   }, /*#__PURE__*/_react.default.createElement(_FilterSelect.FilterSelect, {
     placeholder: "Filter by artist name",
     initialItemsToShow: 6,
-    multiselect: true,
     order: [["country", "name"], ["asc", "asc"]],
     renderItemLabel: function renderItemLabel(item) {
       return "".concat(item.label, ", ").concat(item.country);

package/dist/elements/FilterSelect/FilterSelect.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"names":["title","Default","item","label","country","value"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAGe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AAA2B,IAAA,MAAM,EAAE,CAAC,EAAD;AAAnC,kBACE,6BAAC,0BAAD;AACE,IAAA,WAAW,EAAC,uBADd;AAEE,IAAA,kBAAkB,EAAE,CAFtB;AAGE,IAAA,WAAW,MAHb;AAIE,IAAA,KAAK,EAAE,CACL,CAAC,SAAD,EAAY,MAAZ,CADK,EAEL,CAAC,KAAD,EAAQ,KAAR,CAFK,CAJT;AAQE,IAAA,eAAe,EAAE,yBAACC,IAAD;AAAA,uBAAaA,IAAI,CAACC,KAAlB,eAA4BD,IAAI,CAACE,OAAjC;AAAA,KARnB;AASE,IAAA,QAAQ,EAAE,0BAAO,UAAP,CATZ;AAUE,IAAA,KAAK,EAAE,CACL;AACED,MAAAA,KAAK,EAAE,gBADT;AAEEE,MAAAA,KAAK,EAAE,gBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KADK,EAML;AACED,MAAAA,KAAK,EAAE,kBADT;AAEEE,MAAAA,KAAK,EAAE,cAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KANK,EAWL;AACED,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,cAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KAXK,EAgBL;AACED,MAAAA,KAAK,EAAE,kBADT;AAEEE,MAAAA,KAAK,EAAE,iBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KAhBK,EAqBL;AACED,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,aAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KArBK,EA0BL;AACED,MAAAA,KAAK,EAAE,iBADT;AAEEE,MAAAA,KAAK,EAAE,iBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KA1BK,EA+BL;AACED,MAAAA,KAAK,EAAE,gBADT;AAEEE,MAAAA,KAAK,EAAE,kBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KA/BK;AAVT,IADF,CADF;AAoDD,CArDM;;;AAAMH,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { FilterSelect } from \"./FilterSelect\"\nimport { FilterSelectProps } from \"./FilterSelect\"\n\nexport default {\n  title: \"Components/FilterSelect\",\n}\n\nexport const Default = () => {\n  return (\n    <States<FilterSelectProps> states={[{}]}>\n      <FilterSelect\n        placeholder=\"Filter by artist name\"\n        initialItemsToShow={6}\n        multiselect\n        order={[\n          [\"country\", \"name\"],\n          [\"asc\", \"asc\"],\n        ]}\n        renderItemLabel={(item) => `${item.label}, ${item.country}`}\n        onChange={action(\"onChange\")}\n        items={[\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger\",\n            country: \"American\",\n          },\n          {\n            label: \"Carrie Mae Weems\",\n            value: \"carrie-weems\",\n            country: \"American\",\n          },\n          {\n            label: \"Daniel Arsham\",\n            value: \"daniel-asham\",\n            country: \"American\",\n          },\n          {\n            label: \"Takashi Murakami\",\n            value: \"takashi-muakami\",\n            country: \"American\",\n          },\n          {\n            label: \"Tracey Emin\",\n            value: \"tracey-emin\",\n            country: \"British-Nigerian\",\n          },\n          {\n            label: \"Yinka Shonibare\",\n            value: \"yinka-shonibare\",\n            country: \"Japanese\",\n          },\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger-2\",\n            country: \"British-Nigerian\",\n          },\n        ]}\n      />\n    </States>\n  )\n}\n"],"file":"FilterSelect.story.js"}
+{"version":3,"sources":["../../../src/elements/FilterSelect/FilterSelect.story.tsx"],"names":["title","Default","multiselect","item","label","country","value"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;eAGe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CAAC;AAAEC,MAAAA,WAAW,EAAE;AAAf,KAAD,EAAwB;AAAEA,MAAAA,WAAW,EAAE;AAAf,KAAxB;AADV,kBAGE,6BAAC,0BAAD;AACE,IAAA,WAAW,EAAC,uBADd;AAEE,IAAA,kBAAkB,EAAE,CAFtB;AAGE,IAAA,KAAK,EAAE,CACL,CAAC,SAAD,EAAY,MAAZ,CADK,EAEL,CAAC,KAAD,EAAQ,KAAR,CAFK,CAHT;AAOE,IAAA,eAAe,EAAE,yBAACC,IAAD;AAAA,uBAAaA,IAAI,CAACC,KAAlB,eAA4BD,IAAI,CAACE,OAAjC;AAAA,KAPnB;AAQE,IAAA,QAAQ,EAAE,0BAAO,UAAP,CARZ;AASE,IAAA,KAAK,EAAE,CACL;AACED,MAAAA,KAAK,EAAE,gBADT;AAEEE,MAAAA,KAAK,EAAE,gBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KADK,EAML;AACED,MAAAA,KAAK,EAAE,kBADT;AAEEE,MAAAA,KAAK,EAAE,cAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KANK,EAWL;AACED,MAAAA,KAAK,EAAE,eADT;AAEEE,MAAAA,KAAK,EAAE,cAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KAXK,EAgBL;AACED,MAAAA,KAAK,EAAE,kBADT;AAEEE,MAAAA,KAAK,EAAE,iBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KAhBK,EAqBL;AACED,MAAAA,KAAK,EAAE,aADT;AAEEE,MAAAA,KAAK,EAAE,aAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KArBK,EA0BL;AACED,MAAAA,KAAK,EAAE,iBADT;AAEEE,MAAAA,KAAK,EAAE,iBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KA1BK,EA+BL;AACED,MAAAA,KAAK,EAAE,gBADT;AAEEE,MAAAA,KAAK,EAAE,kBAFT;AAGED,MAAAA,OAAO,EAAE;AAHX,KA/BK;AATT,IAHF,CADF;AAqDD,CAtDM;;;AAAMJ,O","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { FilterSelect } from \"./FilterSelect\"\nimport { FilterSelectProps } from \"./FilterSelect\"\n\nexport default {\n  title: \"Components/FilterSelect\",\n}\n\nexport const Default = () => {\n  return (\n    <States<FilterSelectProps>\n      states={[{ multiselect: true }, { multiselect: false }]}\n    >\n      <FilterSelect\n        placeholder=\"Filter by artist name\"\n        initialItemsToShow={6}\n        order={[\n          [\"country\", \"name\"],\n          [\"asc\", \"asc\"],\n        ]}\n        renderItemLabel={(item) => `${item.label}, ${item.country}`}\n        onChange={action(\"onChange\")}\n        items={[\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger\",\n            country: \"American\",\n          },\n          {\n            label: \"Carrie Mae Weems\",\n            value: \"carrie-weems\",\n            country: \"American\",\n          },\n          {\n            label: \"Daniel Arsham\",\n            value: \"daniel-asham\",\n            country: \"American\",\n          },\n          {\n            label: \"Takashi Murakami\",\n            value: \"takashi-muakami\",\n            country: \"American\",\n          },\n          {\n            label: \"Tracey Emin\",\n            value: \"tracey-emin\",\n            country: \"British-Nigerian\",\n          },\n          {\n            label: \"Yinka Shonibare\",\n            value: \"yinka-shonibare\",\n            country: \"Japanese\",\n          },\n          {\n            label: \"Barbara Kruger\",\n            value: \"barbara-kruger-2\",\n            country: \"British-Nigerian\",\n          },\n        ]}\n      />\n    </States>\n  )\n}\n"],"file":"FilterSelect.story.js"}

package/dist/elements/Range/Range.d.ts

@@ -7,6 +7,6 @@ export interface RangeProps extends BoxProps {
     max: number;
     step: number;
     value?: number[];
-    onChange?: (range: [min: number, max: number]) => void;
+    onChange?: (range: [number, number]) => void;
 }
 export declare const Range: React.FC<RangeProps>;

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 { 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"}
+{"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: [number, 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": "31.6.0",
+  "version": "31.6.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -180,5 +180,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "63a127b62b38a3f02b314e944c3aadd6f5fd729b"
+  "gitHead": "bd4b69eb8dbdc94bb80a9341c6d63f3db347a89d"
 }