@artsy/palette 36.2.0 → 36.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/elements/Pill/Pill.d.ts +2 -0
- package/dist/elements/Pill/Pill.js +9 -3
- package/dist/elements/Pill/Pill.js.map +1 -1
- package/dist/elements/Pill/Pill.story.js +6 -1
- package/dist/elements/Pill/Pill.story.js.map +1 -1
- package/dist/elements/Tooltip/Tooltip.story.d.ts +10 -0
- package/dist/elements/Tooltip/Tooltip.story.js +36 -1
- package/dist/elements/Tooltip/Tooltip.story.js.map +1 -1
- package/dist/utils/useMutationObserver.d.ts +2 -1
- package/dist/utils/useMutationObserver.js +6 -4
- package/dist/utils/useMutationObserver.js.map +1 -1
- package/dist/utils/usePosition.js +8 -9
- package/dist/utils/usePosition.js.map +1 -1
- package/dist/utils/useResizeObserver.d.ts +2 -1
- package/dist/utils/useResizeObserver.js +4 -2
- package/dist/utils/useResizeObserver.js.map +1 -1
- package/package.json +2 -2
|
@@ -20,6 +20,8 @@ export declare type PillProps = ClickableProps & {
|
|
|
20
20
|
Icon?: React.FunctionComponent<BoxProps & {
|
|
21
21
|
fill?: ResponsiveValue<string>;
|
|
22
22
|
}>;
|
|
23
|
+
/** Optional: Icon positioning */
|
|
24
|
+
iconPosition?: "left" | "right";
|
|
23
25
|
} & ({
|
|
24
26
|
variant?: Extract<PillVariant, "default" | "search" | "badge" | "filter" | "gray">;
|
|
25
27
|
} | {
|
|
@@ -13,7 +13,7 @@ var _Clickable = require("../Clickable");
|
|
|
13
13
|
var _Sup = require("../Sup");
|
|
14
14
|
var _Text = require("../Text");
|
|
15
15
|
var _tokens = require("./tokens");
|
|
16
|
-
var _excluded = ["children", "Icon"];
|
|
16
|
+
var _excluded = ["children", "Icon", "iconPosition"];
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
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); }
|
|
19
19
|
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; }
|
|
@@ -32,6 +32,8 @@ exports.PILL_VARIANT_NAMES = PILL_VARIANT_NAMES;
|
|
|
32
32
|
var Pill = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
|
|
33
33
|
var children = _ref.children,
|
|
34
34
|
Icon = _ref.Icon,
|
|
35
|
+
_ref$iconPosition = _ref.iconPosition,
|
|
36
|
+
iconPosition = _ref$iconPosition === void 0 ? "left" : _ref$iconPosition,
|
|
35
37
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
36
38
|
var variant = rest.variant === "profile" && rest.compact ? "gray" : rest.variant;
|
|
37
39
|
return /*#__PURE__*/_react.default.createElement(Container, _extends({
|
|
@@ -45,14 +47,18 @@ var Pill = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
|
|
|
45
47
|
} : {}, {
|
|
46
48
|
// Intentionally empty string
|
|
47
49
|
alt: ""
|
|
48
|
-
})), Icon && /*#__PURE__*/_react.default.createElement(Icon, {
|
|
50
|
+
})), Icon && iconPosition === "left" && /*#__PURE__*/_react.default.createElement(Icon, {
|
|
49
51
|
fill: "currentColor",
|
|
50
52
|
ml: -0.5,
|
|
51
53
|
mr: 0.5
|
|
52
54
|
}), /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
53
55
|
variant: rest.variant === "search" ? ["xs", "sm-display"] : "xs",
|
|
54
56
|
overflowEllipsis: true
|
|
55
|
-
}, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))),
|
|
57
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, children), rest.variant === "search" && "count" in rest && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, " ", /*#__PURE__*/_react.default.createElement(_Sup.Sup, null, rest.count))), Icon && iconPosition === "right" && /*#__PURE__*/_react.default.createElement(Icon, {
|
|
58
|
+
fill: "currentColor",
|
|
59
|
+
ml: 0.5,
|
|
60
|
+
mr: -0.5
|
|
61
|
+
}), (rest.variant === "gray" && rest.selected || rest.variant === "filter" && rest.selected || rest.variant === "profile" && rest.selected) && /*#__PURE__*/_react.default.createElement(_CloseIcon.default, {
|
|
56
62
|
fill: "currentColor",
|
|
57
63
|
ml: 0.5,
|
|
58
64
|
width: 15,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_CloseIcon","_interopRequireDefault","_Clickable","_Sup","_Text","_tokens","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","PILL_VARIANT_NAMES","exports","Pill","forwardRef","_ref","forwardedRef","children","Icon","rest","variant","compact","createElement","Container","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","Text","overflowEllipsis","Fragment","Sup","count","selected","width","height","displayName","defaultProps","styled","Clickable","withConfig","componentId","themeGet","props","_props$variant","states","PILL_VARIANTS","css","focus","hover","active","disabled","img"],"sources":["../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n \"default\",\n \"search\",\n \"filter\",\n \"profile\",\n \"badge\",\n \"gray\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n | \"default\"\n | \"hover\"\n | \"focus\"\n | \"active\"\n | \"selected\"\n | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n as?: keyof JSX.IntrinsicElements | React.ComponentType\n /** Forces focus state */\n focus?: boolean\n /** Forces hover state */\n hover?: boolean\n /** Forces active state. This is for working with :active; not denoting a selected state */\n active?: boolean\n /** Forces selected state. Use this state to denote the selected state */\n selected?: boolean\n /** Optional icon slot */\n Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n} & (\n | {\n variant?: Extract<\n PillVariant,\n \"default\" | \"search\" | \"badge\" | \"filter\" | \"gray\"\n >\n }\n | {\n /** `\"profile\"` pills have an optional `src` */\n variant?: Extract<PillVariant, \"profile\">\n /**\n * Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n */\n src?: string | [string, string]\n /** Optionally switch into a condensed form */\n compact?: boolean\n }\n | {\n /** `search` pills have an optional `count` */\n variant?: Extract<PillVariant, \"search\">\n /** Optional count */\n count?: number\n }\n )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n HTMLAnchorElement & HTMLButtonElement,\n PillProps\n>(({ children, Icon, ...rest }, forwardedRef) => {\n const variant =\n rest.variant === \"profile\" && rest.compact ? \"gray\" : rest.variant\n\n return (\n <Container ref={forwardedRef as any} {...rest} variant={variant}>\n {rest.variant === \"profile\" && rest.src && !rest.compact && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n {Icon && <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />}\n\n <Text\n variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n overflowEllipsis\n >\n <span>{children}</span>\n\n {rest.variant === \"search\" && \"count\" in rest && (\n <>\n {\" \"}\n <Sup>{rest.count}</Sup>\n </>\n )}\n </Text>\n\n {((rest.variant === \"gray\" && rest.selected) ||\n (rest.variant === \"filter\" && rest.selected) ||\n (rest.variant === \"profile\" && rest.selected)) && (\n <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n )}\n </Container>\n )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n border: 1px solid ${themeGet(\"colors.black15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n return css`\n ${states.default}\n ${props.focus && states.focus}\n ${props.hover && states.hover}\n ${props.selected && states.selected}\n ${props.active && states.active}\n ${props.disabled && states.disabled}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${props.selected && states.selected}\n }\n\n &:active {\n ${states.active}\n ${props.selected && states.selected}\n }\n\n &:disabled {\n pointer-events: none;\n ${states.disabled}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.black30\")};\n margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":";;;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAD,uBAAA,CAAAF,OAAA;AAEA,IAAAI,UAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,IAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAT,OAAA;AAAwC,IAAAU,SAAA;AAAA,SAAAL,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAb,wBAAAS,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,aAAAQ,OAAA,CAAAR,GAAA,yBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAS,KAAA,GAAAN,wBAAA,CAAAC,WAAA,OAAAK,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAV,GAAA,YAAAS,KAAA,CAAAE,GAAA,CAAAX,GAAA,SAAAY,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAjB,GAAA,QAAAiB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAApB,GAAA,EAAAiB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAhB,GAAA,EAAAiB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAjB,GAAA,CAAAiB,GAAA,SAAAL,MAAA,CAAAV,OAAA,GAAAF,GAAA,MAAAS,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAtB,GAAA,EAAAY,MAAA,YAAAA,MAAA;AAAA,SAAAW,SAAA,IAAAA,QAAA,GAAAT,MAAA,CAAAU,MAAA,GAAAV,MAAA,CAAAU,MAAA,CAAAC,IAAA,eAAAC,MAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAF,CAAA,UAAAG,MAAA,GAAAF,SAAA,CAAAD,CAAA,YAAAV,GAAA,IAAAa,MAAA,QAAAhB,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAU,MAAA,EAAAb,GAAA,KAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,gBAAAS,MAAA,YAAAH,QAAA,CAAAQ,KAAA,OAAAH,SAAA;AAAA,SAAAI,yBAAAF,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,GAAAQ,6BAAA,CAAAJ,MAAA,EAAAG,QAAA,OAAAhB,GAAA,EAAAU,CAAA,MAAAb,MAAA,CAAAqB,qBAAA,QAAAC,gBAAA,GAAAtB,MAAA,CAAAqB,qBAAA,CAAAL,MAAA,QAAAH,CAAA,MAAAA,CAAA,GAAAS,gBAAA,CAAAP,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAmB,gBAAA,CAAAT,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,uBAAAH,MAAA,CAAAI,SAAA,CAAAoB,oBAAA,CAAAlB,IAAA,CAAAU,MAAA,EAAAb,GAAA,aAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,cAAAS,MAAA;AAAA,SAAAQ,8BAAAJ,MAAA,EAAAG,QAAA,QAAAH,MAAA,yBAAAJ,MAAA,WAAAa,UAAA,GAAAzB,MAAA,CAAA0B,IAAA,CAAAV,MAAA,OAAAb,GAAA,EAAAU,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAY,UAAA,CAAAV,MAAA,EAAAF,CAAA,MAAAV,GAAA,GAAAsB,UAAA,CAAAZ,CAAA,OAAAM,QAAA,CAAAI,OAAA,CAAApB,GAAA,kBAAAS,MAAA,CAAAT,GAAA,IAAAa,MAAA,CAAAb,GAAA,YAAAS,MAAA;AAIjC,IAAMe,kBAAkB,GAAG,CAChC,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,CACE;;AAYV;AAAAC,OAAA,CAAAD,kBAAA,GAAAA,kBAAA;AAuCA;AACA;AACA;AACA;AACA;AACO,IAAME,IAAI,gBAAG,IAAAC,iBAAU,EAG5B,UAAAC,IAAA,EAA8BC,YAAY,EAAK;EAAA,IAA5CC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAKC,IAAI,GAAAjB,wBAAA,CAAAa,IAAA,EAAA9C,SAAA;EAC1B,IAAMmD,OAAO,GACXD,IAAI,CAACC,OAAO,KAAK,SAAS,IAAID,IAAI,CAACE,OAAO,GAAG,MAAM,GAAGF,IAAI,CAACC,OAAO;EAEpE,oBACE5D,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAACC,SAAS,EAAA9B,QAAA;IAAC+B,GAAG,EAAER;EAAoB,GAAKG,IAAI;IAAEC,OAAO,EAAEA;EAAQ,IAC7DD,IAAI,CAACC,OAAO,KAAK,SAAS,IAAID,IAAI,CAACM,GAAG,IAAI,CAACN,IAAI,CAACE,OAAO,iBACtD7D,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAACI,SAAS,EAAAjC,QAAA,KACH0B,IAAI,CAACM,GAAG,GACT;IAAEA,GAAG,EAAE,OAAON,IAAI,CAACM,GAAG,KAAK,QAAQ,GAAGN,IAAI,CAACM,GAAG,GAAGN,IAAI,CAACM,GAAG,CAAC,CAAC;EAAE,CAAC,GAC9D,CAAC,CAAC,EACDN,IAAI,CAACM,GAAG,IAAI,OAAON,IAAI,CAACM,GAAG,KAAK,QAAQ,IAAIN,IAAI,CAACM,GAAG,CAAC,CAAC,CAAC,GACxD;IAAEE,MAAM,KAAAC,MAAA,CAAKT,IAAI,CAACM,GAAG,CAAC,CAAC,CAAC,WAAAG,MAAA,CAAQT,IAAI,CAACM,GAAG,CAAC,CAAC,CAAC;EAAM,CAAC,GAClD,CAAC,CAAC;IACN;IACAI,GAAG,EAAC;EAAE,GAET,EAEAX,IAAI,iBAAI1D,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAACJ,IAAI;IAACY,IAAI,EAAC,cAAc;IAACC,EAAE,EAAE,CAAC,GAAI;IAACC,EAAE,EAAE;EAAI,EAAG,eAExDxE,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAACvD,KAAA,CAAAkE,IAAI;IACHb,OAAO,EAAED,IAAI,CAACC,OAAO,KAAK,QAAQ,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,IAAK;IACjEc,gBAAgB;EAAA,gBAEhB1E,MAAA,CAAAY,OAAA,CAAAkD,aAAA,eAAOL,QAAQ,CAAQ,EAEtBE,IAAI,CAACC,OAAO,KAAK,QAAQ,IAAI,OAAO,IAAID,IAAI,iBAC3C3D,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAAA9D,MAAA,CAAAY,OAAA,CAAA+D,QAAA,QACG,GAAG,eACJ3E,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAACxD,IAAA,CAAAsE,GAAG,QAAEjB,IAAI,CAACkB,KAAK,CAAO,CAE1B,CACI,EAEN,CAAElB,IAAI,CAACC,OAAO,KAAK,MAAM,IAAID,IAAI,CAACmB,QAAQ,IACxCnB,IAAI,CAACC,OAAO,KAAK,QAAQ,IAAID,IAAI,CAACmB,QAAS,IAC3CnB,IAAI,CAACC,OAAO,KAAK,SAAS,IAAID,IAAI,CAACmB,QAAS,kBAC7C9E,MAAA,CAAAY,OAAA,CAAAkD,aAAA,CAAC3D,UAAA,CAAAS,OAAS;IAAC0D,IAAI,EAAC,cAAc;IAACC,EAAE,EAAE,GAAI;IAACQ,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAC/D,CACS;AAEhB,CAAC,CAAC;AAAA5B,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEFA,IAAI,CAAC4B,WAAW,GAAG,MAAM;AAEzB5B,IAAI,CAAC6B,YAAY,GAAG;EAClBtB,OAAO,EAAE;AACX,CAAC;AAED,IAAMG,SAAS,GAAG,IAAAoB,yBAAM,EAACC,oBAAS,CAAC,CAAAC,UAAA;EAAAJ,WAAA;EAAAK,WAAA;AAAA,iQAOb,IAAAC,kBAAQ,EAAC,gBAAgB,CAAC,EAI5C,UAACC,KAAK,EAAK;EAAA,IAAAC,cAAA;EACX,IAAMC,MAAM,GAAGC,qBAAa,EAAAF,cAAA,GAACD,KAAK,CAAC5B,OAAO,cAAA6B,cAAA,cAAAA,cAAA,GAAI,QAAQ,CAAC;EAEvD,WAAOG,qBAAG,sIACNF,MAAM,CAAC9E,OAAO,EACd4E,KAAK,CAACK,KAAK,IAAIH,MAAM,CAACG,KAAK,EAC3BL,KAAK,CAACM,KAAK,IAAIJ,MAAM,CAACI,KAAK,EAC3BN,KAAK,CAACV,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,EACjCU,KAAK,CAACO,MAAM,IAAIL,MAAM,CAACK,MAAM,EAC7BP,KAAK,CAACQ,QAAQ,IAAIN,MAAM,CAACM,QAAQ,EAG/BN,MAAM,CAACI,KAAK,EAKZJ,MAAM,CAACG,KAAK,EACZL,KAAK,CAACV,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,EAIjCY,MAAM,CAACK,MAAM,EACbP,KAAK,CAACV,QAAQ,IAAIY,MAAM,CAACZ,QAAQ,EAKjCY,MAAM,CAACM,QAAQ;AAGvB,CAAC,CACF;AAED,IAAM9B,SAAS,GAAGiB,yBAAM,CAACc,GAAG,CAAAZ,UAAA;EAAAJ,WAAA;EAAAK,WAAA;AAAA,0HAKV,IAAAC,kBAAQ,EAAC,SAAS,CAAC,EACf,IAAAA,kBAAQ,EAAC,gBAAgB,CAAC,EAC9B,IAAAA,kBAAQ,EAAC,SAAS,CAAC,CACpC"}
|
|
1
|
+
{"version":3,"file":"Pill.js","names":["_themeGet","require","_react","_interopRequireWildcard","_styledComponents","_CloseIcon","_interopRequireDefault","_Clickable","_Sup","_Text","_tokens","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","PILL_VARIANT_NAMES","exports","Pill","forwardRef","_ref","forwardedRef","children","Icon","_ref$iconPosition","iconPosition","rest","variant","compact","createElement","Container","ref","src","Thumbnail","srcSet","concat","alt","fill","ml","mr","Text","overflowEllipsis","Fragment","Sup","count","selected","width","height","displayName","defaultProps","styled","Clickable","withConfig","componentId","themeGet","props","_props$variant","states","PILL_VARIANTS","css","focus","hover","active","disabled","img"],"sources":["../../../src/elements/Pill/Pill.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef } from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport CloseIcon from \"@artsy/icons/CloseIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\nimport { Sup } from \"../Sup\"\nimport { Text } from \"../Text\"\nimport { PILL_VARIANTS } from \"./tokens\"\nimport { BoxProps } from \"../Box\"\nimport { ResponsiveValue } from \"styled-system\"\n\nexport const PILL_VARIANT_NAMES = [\n \"default\",\n \"search\",\n \"filter\",\n \"profile\",\n \"badge\",\n \"gray\",\n] as const\n\nexport type PillVariant = typeof PILL_VARIANT_NAMES[number]\n\nexport type PillState =\n | \"default\"\n | \"hover\"\n | \"focus\"\n | \"active\"\n | \"selected\"\n | \"disabled\"\n\n/** PillProps */\nexport type PillProps = ClickableProps & {\n as?: keyof JSX.IntrinsicElements | React.ComponentType\n /** Forces focus state */\n focus?: boolean\n /** Forces hover state */\n hover?: boolean\n /** Forces active state. This is for working with :active; not denoting a selected state */\n active?: boolean\n /** Forces selected state. Use this state to denote the selected state */\n selected?: boolean\n /** Optional icon slot */\n Icon?: React.FunctionComponent<BoxProps & { fill?: ResponsiveValue<string> }>\n /** Optional: Icon positioning */\n iconPosition?: \"left\" | \"right\"\n} & (\n | {\n variant?: Extract<\n PillVariant,\n \"default\" | \"search\" | \"badge\" | \"filter\" | \"gray\"\n >\n }\n | {\n /** `\"profile\"` pills have an optional `src` */\n variant?: Extract<PillVariant, \"profile\">\n /**\n * Optional avatar; 1x or [1x, 2x]\n * Should target 30x30 @1x, 60x60 @2x\n */\n src?: string | [string, string]\n /** Optionally switch into a condensed form */\n compact?: boolean\n }\n | {\n /** `search` pills have an optional `count` */\n variant?: Extract<PillVariant, \"search\">\n /** Optional count */\n count?: number\n }\n )\n\n/**\n * A Pill is a non-CTA button.\n * It may be used for things like active filters, search states,\n * or to denote an profile entity (possibly in the context of a card).\n */\nexport const Pill = forwardRef<\n HTMLAnchorElement & HTMLButtonElement,\n PillProps\n>(({ children, Icon, iconPosition = \"left\", ...rest }, forwardedRef) => {\n const variant =\n rest.variant === \"profile\" && rest.compact ? \"gray\" : rest.variant\n\n return (\n <Container ref={forwardedRef as any} {...rest} variant={variant}>\n {rest.variant === \"profile\" && rest.src && !rest.compact && (\n <Thumbnail\n {...(rest.src\n ? { src: typeof rest.src === \"string\" ? rest.src : rest.src[0] }\n : {})}\n {...(rest.src && typeof rest.src !== \"string\" && rest.src[1]\n ? { srcSet: `${rest.src[0]} 1x, ${rest.src[1]} 2x` }\n : {})}\n // Intentionally empty string\n alt=\"\"\n />\n )}\n\n {Icon && iconPosition === \"left\" && (\n <Icon fill=\"currentColor\" ml={-0.5} mr={0.5} />\n )}\n\n <Text\n variant={rest.variant === \"search\" ? [\"xs\", \"sm-display\"] : \"xs\"}\n overflowEllipsis\n >\n <span>{children}</span>\n\n {rest.variant === \"search\" && \"count\" in rest && (\n <>\n {\" \"}\n <Sup>{rest.count}</Sup>\n </>\n )}\n </Text>\n\n {Icon && iconPosition === \"right\" && (\n <Icon fill=\"currentColor\" ml={0.5} mr={-0.5} />\n )}\n\n {((rest.variant === \"gray\" && rest.selected) ||\n (rest.variant === \"filter\" && rest.selected) ||\n (rest.variant === \"profile\" && rest.selected)) && (\n <CloseIcon fill=\"currentColor\" ml={0.5} width={15} height={15} />\n )}\n </Container>\n )\n})\n\nPill.displayName = \"Pill\"\n\nPill.defaultProps = {\n variant: \"default\",\n}\n\nconst Container = styled(Clickable)<PillProps>`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n border: 1px solid ${themeGet(\"colors.black15\")};\n transition: color 0.25s ease, border-color 0.25s ease,\n background-color 0.25s ease, box-shadow 0.25s ease;\n\n ${(props) => {\n const states = PILL_VARIANTS[props.variant ?? \"search\"]\n\n return css`\n ${states.default}\n ${props.focus && states.focus}\n ${props.hover && states.hover}\n ${props.selected && states.selected}\n ${props.active && states.active}\n ${props.disabled && states.disabled}\n\n &:hover {\n ${states.hover}\n }\n\n &:focus {\n outline: 0;\n ${states.focus}\n ${props.selected && states.selected}\n }\n\n &:active {\n ${states.active}\n ${props.selected && states.selected}\n }\n\n &:disabled {\n pointer-events: none;\n ${states.disabled}\n }\n `\n }}\n`\n\nconst Thumbnail = styled.img`\n display: block;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n margin-right: ${themeGet(\"space.1\")};\n background-color: ${themeGet(\"colors.black30\")};\n margin-left: -${themeGet(\"space.1\")};\n`\n"],"mappings":"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"}
|
|
@@ -13,6 +13,7 @@ var _Pill = require("./Pill");
|
|
|
13
13
|
var _Box = require("../Box");
|
|
14
14
|
var _Join = require("../Join");
|
|
15
15
|
var _GraphIcon = _interopRequireDefault(require("@artsy/icons/GraphIcon"));
|
|
16
|
+
var _ChevronSmallDownIcon = _interopRequireDefault(require("@artsy/icons/ChevronSmallDownIcon"));
|
|
16
17
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
17
18
|
var _Popover = require("../Popover");
|
|
18
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -131,7 +132,11 @@ exports.ArtistWithImage = ArtistWithImage;
|
|
|
131
132
|
ArtistWithImage.displayName = "ArtistWithImage";
|
|
132
133
|
var PillWithIcon = function PillWithIcon() {
|
|
133
134
|
return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
|
|
134
|
-
states: [{
|
|
135
|
+
states: [{
|
|
136
|
+
iconPosition: "right",
|
|
137
|
+
Icon: _ChevronSmallDownIcon.default,
|
|
138
|
+
variant: "default"
|
|
139
|
+
}, {}, {
|
|
135
140
|
focus: true
|
|
136
141
|
}, {
|
|
137
142
|
hover: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pill.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_Flex","_Spacer","_Pill","_Box","_Join","_GraphIcon","_interopRequireDefault","_styledComponents","_Popover","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_extends","assign","bind","target","arguments","source","apply","_default","title","exports","Display","styled","Box","withConfig","displayName","componentId","Variants","createElement","States","states","PILL_VARIANT_NAMES","map","variant","props","p","overflowX","includes","concat","bg","color","Flex","Join","separator","Spacer","x","Pill","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","count","ArtistWithImage","src","PillWithIcon","Icon","GraphIcon","Demo","_useState","useState","_useState2","setSelected","onClick","prevActive","ProfileVariant","compact","undefined","PillWithPopover","Fragment","Popover","placement","popover","_ref","anchorRef","onVisible","ref"],"sources":["../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\n\nexport default {\n title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n return (\n <States<PillProps>\n states={PILL_VARIANT_NAMES.map((variant) => ({\n variant: variant as PillVariant,\n }))}\n >\n {(props) => (\n <Display\n p={1}\n overflowX=\"auto\"\n {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n ? { bg: \"black100\", color: \"white100\" }\n : { bg: \"white100\", color: \"black100\" })}\n >\n <Flex>\n <Join separator={<Spacer x={2} />}>\n <Pill {...props}>Default</Pill>\n\n <Pill {...props} focus>\n Focus\n </Pill>\n\n <Pill {...props} hover>\n Hover\n </Pill>\n\n <Pill {...props} active>\n Active\n </Pill>\n\n <Pill {...props} selected>\n Selected\n </Pill>\n\n <Pill {...props} disabled>\n Disabled\n </Pill>\n </Join>\n </Flex>\n </Display>\n )}\n </States>\n )\n}\n\nexport const LinkExample = () => {\n return (\n <Pill\n variant=\"profile\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n )\n}\n\nexport const LongExampleWithTruncation = () => {\n return (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n )\n}\n\nexport const SearchWithCount = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill variant=\"search\" count={123}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const ArtistWithImage = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n >\n Isa Genzken\n </Pill>\n </States>\n )\n}\n\nexport const PillWithIcon = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n { variant: \"search\" },\n { variant: \"search\", focus: true },\n { variant: \"search\", hover: true },\n { variant: \"search\", active: true },\n { variant: \"search\", selected: true },\n { variant: \"search\", disabled: true },\n { variant: \"filter\" },\n { variant: \"filter\", focus: true },\n { variant: \"filter\", hover: true },\n { variant: \"filter\", active: true },\n { variant: \"filter\", selected: true },\n { variant: \"filter\", disabled: true },\n ]}\n >\n <Pill variant=\"badge\" Icon={GraphIcon}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const Demo = () => {\n const [selected, setSelected] = useState(false)\n return (\n <Pill\n selected={selected}\n onClick={() => setSelected((prevActive) => !prevActive)}\n >\n Example\n </Pill>\n )\n}\n\nexport const ProfileVariant = () => {\n return (\n <States<PillProps>\n states={[\n { variant: \"profile\" },\n { variant: \"profile\", compact: true },\n { variant: \"profile\", src: undefined },\n ]}\n >\n <Pill src=\"https://picsum.photos/seed/isa/60/60\">Isa Genzken</Pill>\n </States>\n )\n}\n\nexport const PillWithPopover = () => {\n return (\n <>\n <Popover placement=\"bottom\" popover={<>Content</>}>\n {({ anchorRef, onVisible }) => (\n <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n Example\n </Pill>\n )}\n </Popover>\n </>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Pill.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_Flex","_Spacer","_Pill","_Box","_Join","_GraphIcon","_interopRequireDefault","_ChevronSmallDownIcon","_styledComponents","_Popover","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_extends","assign","bind","target","arguments","source","apply","_default","title","exports","Display","styled","Box","withConfig","displayName","componentId","Variants","createElement","States","states","PILL_VARIANT_NAMES","map","variant","props","p","overflowX","includes","concat","bg","color","Flex","Join","separator","Spacer","x","Pill","focus","hover","active","selected","disabled","LinkExample","as","href","LongExampleWithTruncation","maxWidth","SearchWithCount","count","ArtistWithImage","src","PillWithIcon","iconPosition","Icon","ChevronSmallDownIcon","GraphIcon","Demo","_useState","useState","_useState2","setSelected","onClick","prevActive","ProfileVariant","compact","undefined","PillWithPopover","Fragment","Popover","placement","popover","_ref","anchorRef","onVisible","ref"],"sources":["../../../src/elements/Pill/Pill.story.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Pill, PillProps, PillVariant, PILL_VARIANT_NAMES } from \"./Pill\"\nimport { Box } from \"../Box\"\nimport { Join } from \"../Join\"\nimport GraphIcon from \"@artsy/icons/GraphIcon\"\nimport ChevronSmallDownIcon from \"@artsy/icons/ChevronSmallDownIcon\"\nimport styled from \"styled-components\"\nimport { Popover } from \"../Popover\"\n\nexport default {\n title: \"Components/Pill\",\n}\n\nconst Display = styled(Box)``\nDisplay.displayName = \"Pill\"\n\nexport const Variants = () => {\n return (\n <States<PillProps>\n states={PILL_VARIANT_NAMES.map((variant) => ({\n variant: variant as PillVariant,\n }))}\n >\n {(props) => (\n <Display\n p={1}\n overflowX=\"auto\"\n {...([\"primaryWhite\", \"secondaryWhite\"].includes(`${props.variant}`)\n ? { bg: \"black100\", color: \"white100\" }\n : { bg: \"white100\", color: \"black100\" })}\n >\n <Flex>\n <Join separator={<Spacer x={2} />}>\n <Pill {...props}>Default</Pill>\n\n <Pill {...props} focus>\n Focus\n </Pill>\n\n <Pill {...props} hover>\n Hover\n </Pill>\n\n <Pill {...props} active>\n Active\n </Pill>\n\n <Pill {...props} selected>\n Selected\n </Pill>\n\n <Pill {...props} disabled>\n Disabled\n </Pill>\n </Join>\n </Flex>\n </Display>\n )}\n </States>\n )\n}\n\nexport const LinkExample = () => {\n return (\n <Pill\n variant=\"profile\"\n as=\"a\"\n // TODO: Need a decent way of typing the threaded polymorphic `as` prop\n // @ts-expect-error MIGRATE_STRICT_MODE\n href=\"#example\"\n >\n Artist Name\n </Pill>\n )\n}\n\nexport const LongExampleWithTruncation = () => {\n return (\n <Pill maxWidth={300}>\n Studio Museum in Harlem Artist-in-Residence (AIR) Program\n </Pill>\n )\n}\n\nexport const SearchWithCount = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill variant=\"search\" count={123}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const ArtistWithImage = () => {\n return (\n <States<PillProps>\n states={[\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n ]}\n >\n <Pill\n variant=\"profile\"\n src={[\n \"https://picsum.photos/seed/isa/30/30\",\n \"https://picsum.photos/seed/isa/60/60\",\n ]}\n >\n Isa Genzken\n </Pill>\n </States>\n )\n}\n\nexport const PillWithIcon = () => {\n return (\n <States<PillProps>\n states={[\n {\n iconPosition: \"right\",\n Icon: ChevronSmallDownIcon,\n variant: \"default\",\n },\n {},\n { focus: true },\n { hover: true },\n { active: true },\n { selected: true },\n { disabled: true },\n { variant: \"search\" },\n { variant: \"search\", focus: true },\n { variant: \"search\", hover: true },\n { variant: \"search\", active: true },\n { variant: \"search\", selected: true },\n { variant: \"search\", disabled: true },\n { variant: \"filter\" },\n { variant: \"filter\", focus: true },\n { variant: \"filter\", hover: true },\n { variant: \"filter\", active: true },\n { variant: \"filter\", selected: true },\n { variant: \"filter\", disabled: true },\n ]}\n >\n <Pill variant=\"badge\" Icon={GraphIcon}>\n Artist Series\n </Pill>\n </States>\n )\n}\n\nexport const Demo = () => {\n const [selected, setSelected] = useState(false)\n return (\n <Pill\n selected={selected}\n onClick={() => setSelected((prevActive) => !prevActive)}\n >\n Example\n </Pill>\n )\n}\n\nexport const ProfileVariant = () => {\n return (\n <States<PillProps>\n states={[\n { variant: \"profile\" },\n { variant: \"profile\", compact: true },\n { variant: \"profile\", src: undefined },\n ]}\n >\n <Pill src=\"https://picsum.photos/seed/isa/60/60\">Isa Genzken</Pill>\n </States>\n )\n}\n\nexport const PillWithPopover = () => {\n return (\n <>\n <Popover placement=\"bottom\" popover={<>Content</>}>\n {({ anchorRef, onVisible }) => (\n <Pill ref={anchorRef as any} onClick={() => onVisible()}>\n Example\n </Pill>\n )}\n </Popover>\n </>\n )\n}\n"],"mappings":"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"}
|
|
@@ -17,3 +17,13 @@ export declare const Placement: () => JSX.Element;
|
|
|
17
17
|
export declare const IconExample: () => JSX.Element;
|
|
18
18
|
export declare const ExternalControl: () => JSX.Element;
|
|
19
19
|
export declare const PointerCentering: () => JSX.Element;
|
|
20
|
+
export declare const StressTest: {
|
|
21
|
+
(): JSX.Element;
|
|
22
|
+
story: {
|
|
23
|
+
parameters: {
|
|
24
|
+
chromatic: {
|
|
25
|
+
disable: boolean;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default = exports._Clickable = exports.PointerCentering = exports.Placement = exports.IconExample = exports.ExternalControl = exports.Default = void 0;
|
|
7
|
+
exports.default = exports._Clickable = exports.StressTest = exports.PointerCentering = exports.Placement = exports.IconExample = exports.ExternalControl = exports.Default = void 0;
|
|
8
8
|
var _addonActions = require("@storybook/addon-actions");
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _storybookStates = require("storybook-states");
|
|
@@ -17,6 +17,7 @@ var _Input = require("../Input");
|
|
|
17
17
|
var _Spacer = require("../Spacer");
|
|
18
18
|
var _Text = require("../Text");
|
|
19
19
|
var _Tooltip = require("./Tooltip");
|
|
20
|
+
var _Stack = require("../Stack");
|
|
20
21
|
var _excluded = ["children"];
|
|
21
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
22
23
|
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); }
|
|
@@ -226,4 +227,38 @@ var PointerCentering = function PointerCentering() {
|
|
|
226
227
|
}))));
|
|
227
228
|
};
|
|
228
229
|
exports.PointerCentering = PointerCentering;
|
|
230
|
+
var StressTest = function StressTest() {
|
|
231
|
+
return /*#__PURE__*/_react.default.createElement(_Stack.Stack, {
|
|
232
|
+
gap: 1
|
|
233
|
+
}, Array.from({
|
|
234
|
+
length: 3000
|
|
235
|
+
}).map(function (_, i) {
|
|
236
|
+
return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
|
|
237
|
+
key: i,
|
|
238
|
+
content: CONTENT,
|
|
239
|
+
pointer: true,
|
|
240
|
+
variant: "defaultDark",
|
|
241
|
+
placement: "right"
|
|
242
|
+
}, /*#__PURE__*/_react.default.createElement(_Text.Text, {
|
|
243
|
+
variant: "xs",
|
|
244
|
+
textAlign: "center",
|
|
245
|
+
width: 40,
|
|
246
|
+
height: 40,
|
|
247
|
+
mx: "auto",
|
|
248
|
+
bg: "black10",
|
|
249
|
+
display: "flex",
|
|
250
|
+
alignItems: "center",
|
|
251
|
+
justifyContent: "center"
|
|
252
|
+
}, i));
|
|
253
|
+
}));
|
|
254
|
+
};
|
|
255
|
+
exports.StressTest = StressTest;
|
|
256
|
+
StressTest.displayName = "StressTest";
|
|
257
|
+
StressTest.story = {
|
|
258
|
+
parameters: {
|
|
259
|
+
chromatic: {
|
|
260
|
+
disable: true
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
};
|
|
229
264
|
//# sourceMappingURL=Tooltip.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_HelpIcon","_interopRequireDefault","_usePosition","_Box","_Button","_Clickable2","_Input","_Spacer","_Text","_Tooltip","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_extends","assign","bind","target","arguments","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","CONTENT","_default","title","exports","Default","createElement","States","states","placement","width","visible","pointer","variant","children","Fragment","textAlign","offset","_ref","rest","Tooltip","content","Text","p","bg","color","displayName","_Clickable","Clickable","onClick","action","story","parameters","chromatic","disable","Placement","POSITION","map","props","JSON","stringify","maxWidth","mx","IconExample","display","alignItems","lineHeight","Box","as","style","ml","ExternalControl","_useState","useState","_useState2","setVisible","Button","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","mr","mb","onMouseOver","Input","type","min","max","onChange","e","parseInt","Spacer","y","height","position","top","mt","left"],"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<TooltipProps>>\n states={[\n { placement: \"top-start\" },\n { placement: \"bottom\", width: 600 },\n { placement: \"bottom\", visible: true, pointer: true },\n {\n variant: \"defaultDark\",\n placement: \"bottom\",\n visible: true,\n pointer: true,\n },\n {\n visible: false,\n children: <>This text has a tooltip that never displays</>,\n },\n {\n visible: true,\n textAlign: \"center\",\n },\n {\n visible: true,\n pointer: true,\n offset: -10,\n },\n ]}\n >\n {({ children, ...rest }) => (\n <Tooltip content={CONTENT} {...rest}>\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n bg=\"black100\"\n color=\"white100\"\n >\n {children ?? \"This text has a tooltip\"}\n </Text>\n </Tooltip>\n )}\n </States>\n )\n}\n\nexport const _Clickable = () => {\n return (\n <States<Partial<TooltipProps>> states={[{}]}>\n <Tooltip content={CONTENT}>\n <Clickable onClick={action(\"onClick\")}>\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n bg=\"black100\"\n color=\"white100\"\n >\n This text has a tooltip and is clickable\n </Text>\n </Clickable>\n </Tooltip>\n </States>\n )\n}\n\n_Clickable.story = {\n parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n return (\n <States<Partial<TooltipProps>>\n states={Object.keys(POSITION).map((placement) => ({\n placement: placement as Position,\n }))}\n >\n {(props) => {\n return (\n <Tooltip\n content={JSON.stringify(props)}\n variant=\"defaultDark\"\n pointer\n visible\n {...props}\n >\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n maxWidth=\"50%\"\n mx=\"auto\"\n bg=\"black10\"\n >\n {JSON.stringify(props)}\n </Text>\n </Tooltip>\n )\n }}\n </States>\n )\n}\n\nexport const IconExample = () => {\n return (\n <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n Hover (or focus) the icon to display the tooltip.{\" \"}\n <Tooltip content={CONTENT} placement=\"bottom\">\n {/* Icons don't forwardRefs so we have to wrap in a span */}\n <Box as=\"span\" style={{ lineHeight: 0 }}>\n <HelpIcon ml={0.5} />\n </Box>\n </Tooltip>\n </Text>\n )\n}\n\nexport const ExternalControl = () => {\n const [visible, setVisible] = useState(false)\n\n return (\n <>\n <Tooltip\n content={CONTENT}\n visible={visible}\n pointer\n variant=\"defaultDark\"\n >\n <Button\n variant=\"secondaryBlack\"\n onClick={() => {\n setVisible((visible) => !visible)\n }}\n >\n {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n </Button>\n </Tooltip>\n </>\n )\n}\n\nexport const PointerCentering = () => {\n const [placement, setPlacement] = useState<Position>(\"top\")\n const [size, setSize] = useState(50)\n\n return (\n <>\n {Object.keys(POSITION).map((placement) => {\n return (\n <Button\n key={placement}\n mr={1}\n mb={1}\n variant=\"secondaryBlack\"\n size=\"small\"\n onMouseOver={() => {\n setPlacement(placement as Position)\n }}\n >\n {placement}\n </Button>\n )\n })}\n\n <Input\n type=\"range\"\n min={0}\n max={200}\n value={size}\n onChange={(e) => {\n setSize(parseInt(e.target.value))\n }}\n />\n\n <Spacer y={12} />\n\n <Tooltip\n content={CONTENT}\n pointer\n visible\n variant=\"defaultDark\"\n placement={placement}\n >\n <Box\n bg=\"black10\"\n width={size}\n height={size}\n mx=\"auto\"\n position=\"relative\"\n >\n <Box\n height=\"1px\"\n bg=\"red100\"\n width=\"100%\"\n position=\"absolute\"\n top=\"50%\"\n mt=\"-0.5px\"\n />\n\n <Box\n height=\"100%\"\n width=\"1px\"\n bg=\"red100\"\n position=\"absolute\"\n left=\"50%\"\n ml=\"-0.5px\"\n />\n </Box>\n </Tooltip>\n </>\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.story.js","names":["_addonActions","require","_react","_interopRequireWildcard","_storybookStates","_HelpIcon","_interopRequireDefault","_usePosition","_Box","_Button","_Clickable2","_Input","_Spacer","_Text","_Tooltip","_Stack","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","_typeof","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_extends","assign","bind","target","arguments","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","CONTENT","_default","title","exports","Default","createElement","States","states","placement","width","visible","pointer","variant","children","Fragment","textAlign","offset","_ref","rest","Tooltip","content","Text","p","bg","color","displayName","_Clickable","Clickable","onClick","action","story","parameters","chromatic","disable","Placement","POSITION","map","props","JSON","stringify","maxWidth","mx","IconExample","display","alignItems","lineHeight","Box","as","style","ml","ExternalControl","_useState","useState","_useState2","setVisible","Button","PointerCentering","_useState3","_useState4","setPlacement","_useState5","_useState6","size","setSize","mr","mb","onMouseOver","Input","type","min","max","onChange","e","parseInt","Spacer","y","height","position","top","mt","left","StressTest","Stack","gap","_","justifyContent"],"sources":["../../../src/elements/Tooltip/Tooltip.story.tsx"],"sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport HelpIcon from \"@artsy/icons/HelpIcon\"\nimport { Position, POSITION } from \"../../utils/usePosition\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Clickable } from \"../Clickable\"\nimport { Input } from \"../Input\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Tooltip, TooltipProps } from \"./Tooltip\"\nimport { Stack } from \"../Stack\"\n\nconst CONTENT = \"Lorem ipsum dolor sit amet consectetur adipisicing elit?\"\n\nexport default {\n title: \"Components/Tooltip\",\n}\n\nexport const Default = () => {\n return (\n <States<Partial<TooltipProps>>\n states={[\n { placement: \"top-start\" },\n { placement: \"bottom\", width: 600 },\n { placement: \"bottom\", visible: true, pointer: true },\n {\n variant: \"defaultDark\",\n placement: \"bottom\",\n visible: true,\n pointer: true,\n },\n {\n visible: false,\n children: <>This text has a tooltip that never displays</>,\n },\n {\n visible: true,\n textAlign: \"center\",\n },\n {\n visible: true,\n pointer: true,\n offset: -10,\n },\n ]}\n >\n {({ children, ...rest }) => (\n <Tooltip content={CONTENT} {...rest}>\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n bg=\"black100\"\n color=\"white100\"\n >\n {children ?? \"This text has a tooltip\"}\n </Text>\n </Tooltip>\n )}\n </States>\n )\n}\n\nexport const _Clickable = () => {\n return (\n <States<Partial<TooltipProps>> states={[{}]}>\n <Tooltip content={CONTENT}>\n <Clickable onClick={action(\"onClick\")}>\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n bg=\"black100\"\n color=\"white100\"\n >\n This text has a tooltip and is clickable\n </Text>\n </Clickable>\n </Tooltip>\n </States>\n )\n}\n\n_Clickable.story = {\n parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n return (\n <States<Partial<TooltipProps>>\n states={Object.keys(POSITION).map((placement) => ({\n placement: placement as Position,\n }))}\n >\n {(props) => {\n return (\n <Tooltip\n content={JSON.stringify(props)}\n variant=\"defaultDark\"\n pointer\n visible\n {...props}\n >\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n p={1}\n maxWidth=\"50%\"\n mx=\"auto\"\n bg=\"black10\"\n >\n {JSON.stringify(props)}\n </Text>\n </Tooltip>\n )\n }}\n </States>\n )\n}\n\nexport const IconExample = () => {\n return (\n <Text variant=\"xs\" display=\"flex\" alignItems=\"center\" lineHeight={1}>\n Hover (or focus) the icon to display the tooltip.{\" \"}\n <Tooltip content={CONTENT} placement=\"bottom\">\n {/* Icons don't forwardRefs so we have to wrap in a span */}\n <Box as=\"span\" style={{ lineHeight: 0 }}>\n <HelpIcon ml={0.5} />\n </Box>\n </Tooltip>\n </Text>\n )\n}\n\nexport const ExternalControl = () => {\n const [visible, setVisible] = useState(false)\n\n return (\n <>\n <Tooltip\n content={CONTENT}\n visible={visible}\n pointer\n variant=\"defaultDark\"\n >\n <Button\n variant=\"secondaryBlack\"\n onClick={() => {\n setVisible((visible) => !visible)\n }}\n >\n {visible ? \"Click to hide tooltip\" : \"Click to show tooltip\"}\n </Button>\n </Tooltip>\n </>\n )\n}\n\nexport const PointerCentering = () => {\n const [placement, setPlacement] = useState<Position>(\"top\")\n const [size, setSize] = useState(50)\n\n return (\n <>\n {Object.keys(POSITION).map((placement) => {\n return (\n <Button\n key={placement}\n mr={1}\n mb={1}\n variant=\"secondaryBlack\"\n size=\"small\"\n onMouseOver={() => {\n setPlacement(placement as Position)\n }}\n >\n {placement}\n </Button>\n )\n })}\n\n <Input\n type=\"range\"\n min={0}\n max={200}\n value={size}\n onChange={(e) => {\n setSize(parseInt(e.target.value))\n }}\n />\n\n <Spacer y={12} />\n\n <Tooltip\n content={CONTENT}\n pointer\n visible\n variant=\"defaultDark\"\n placement={placement}\n >\n <Box\n bg=\"black10\"\n width={size}\n height={size}\n mx=\"auto\"\n position=\"relative\"\n >\n <Box\n height=\"1px\"\n bg=\"red100\"\n width=\"100%\"\n position=\"absolute\"\n top=\"50%\"\n mt=\"-0.5px\"\n />\n\n <Box\n height=\"100%\"\n width=\"1px\"\n bg=\"red100\"\n position=\"absolute\"\n left=\"50%\"\n ml=\"-0.5px\"\n />\n </Box>\n </Tooltip>\n </>\n )\n}\n\nexport const StressTest = () => {\n return (\n <Stack gap={1}>\n {Array.from({ length: 3000 }).map((_, i) => {\n return (\n <Tooltip\n key={i}\n content={CONTENT}\n pointer\n variant=\"defaultDark\"\n placement=\"right\"\n >\n <Text\n variant=\"xs\"\n textAlign=\"center\"\n width={40}\n height={40}\n mx=\"auto\"\n bg=\"black10\"\n display=\"flex\"\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {i}\n </Text>\n </Tooltip>\n )\n })}\n </Stack>\n )\n}\n\nStressTest.story = {\n parameters: { chromatic: { disable: true } },\n}\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { MutableRefObject } from "react";
|
|
2
2
|
declare type UseMutationObserver = {
|
|
3
|
+
active?: boolean;
|
|
3
4
|
onMutate: MutationCallback;
|
|
4
5
|
options?: MutationObserverInit;
|
|
5
6
|
} & ({
|
|
@@ -10,5 +11,5 @@ declare type UseMutationObserver = {
|
|
|
10
11
|
/**
|
|
11
12
|
* Accepts a ref and calls the `onMutate` callback when mutations are observed.
|
|
12
13
|
*/
|
|
13
|
-
export declare const useMutationObserver: ({ onMutate, options, ...rest }: UseMutationObserver) => void;
|
|
14
|
+
export declare const useMutationObserver: ({ active, onMutate, options, ...rest }: UseMutationObserver) => void;
|
|
14
15
|
export {};
|
|
@@ -5,14 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useMutationObserver = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
|
-
var _excluded = ["onMutate", "options"];
|
|
8
|
+
var _excluded = ["active", "onMutate", "options"];
|
|
9
9
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
10
10
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
11
11
|
/**
|
|
12
12
|
* Accepts a ref and calls the `onMutate` callback when mutations are observed.
|
|
13
13
|
*/
|
|
14
14
|
var useMutationObserver = function useMutationObserver(_ref) {
|
|
15
|
-
var
|
|
15
|
+
var _ref$active = _ref.active,
|
|
16
|
+
active = _ref$active === void 0 ? true : _ref$active,
|
|
17
|
+
onMutate = _ref.onMutate,
|
|
16
18
|
_ref$options = _ref.options,
|
|
17
19
|
options = _ref$options === void 0 ? {
|
|
18
20
|
attributes: true,
|
|
@@ -22,7 +24,7 @@ var useMutationObserver = function useMutationObserver(_ref) {
|
|
|
22
24
|
} : _ref$options,
|
|
23
25
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
24
26
|
(0, _react.useEffect)(function () {
|
|
25
|
-
if (typeof MutationObserver === "undefined") {
|
|
27
|
+
if (!active || typeof MutationObserver === "undefined") {
|
|
26
28
|
return;
|
|
27
29
|
}
|
|
28
30
|
var el = "ref" in rest ? rest.ref.current : rest.element;
|
|
@@ -36,7 +38,7 @@ var useMutationObserver = function useMutationObserver(_ref) {
|
|
|
36
38
|
};
|
|
37
39
|
}
|
|
38
40
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
-
}, [onMutate, options]);
|
|
41
|
+
}, [onMutate, options, active]);
|
|
40
42
|
};
|
|
41
43
|
exports.useMutationObserver = useMutationObserver;
|
|
42
44
|
//# sourceMappingURL=useMutationObserver.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMutationObserver.js","names":["_react","require","_excluded","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","useMutationObserver","_ref","onMutate","_ref$options","options","attributes","characterData","childList","subtree","rest","useEffect","MutationObserver","el","ref","current","element","observer","observe","disconnect","exports"],"sources":["../../src/utils/useMutationObserver.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\"\nimport { useEffect } from \"react\"\n\ntype UseMutationObserver = {\n onMutate: MutationCallback\n options?: MutationObserverInit\n} & (\n | { ref: MutableRefObject<HTMLElement | null> }\n | { element?: HTMLElement | null }\n)\n\n/**\n * Accepts a ref and calls the `onMutate` callback when mutations are observed.\n */\nexport const useMutationObserver = ({\n onMutate,\n options = {\n attributes: true,\n characterData: true,\n childList: true,\n subtree: true,\n },\n ...rest\n}: UseMutationObserver) => {\n useEffect(() => {\n if (typeof MutationObserver === \"undefined\") {\n return\n }\n\n const el = \"ref\" in rest ? rest.ref.current : rest.element\n\n if (el) {\n const observer = new MutationObserver(onMutate)\n\n // Start observing the target node for configured mutations\n observer.observe(el, options)\n\n return () => {\n observer.disconnect()\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onMutate, options])\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAiC,IAAAC,SAAA;AAAA,SAAAC,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;
|
|
1
|
+
{"version":3,"file":"useMutationObserver.js","names":["_react","require","_excluded","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","useMutationObserver","_ref","_ref$active","active","onMutate","_ref$options","options","attributes","characterData","childList","subtree","rest","useEffect","MutationObserver","el","ref","current","element","observer","observe","disconnect","exports"],"sources":["../../src/utils/useMutationObserver.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\"\nimport { useEffect } from \"react\"\n\ntype UseMutationObserver = {\n active?: boolean\n onMutate: MutationCallback\n options?: MutationObserverInit\n} & (\n | { ref: MutableRefObject<HTMLElement | null> }\n | { element?: HTMLElement | null }\n)\n\n/**\n * Accepts a ref and calls the `onMutate` callback when mutations are observed.\n */\nexport const useMutationObserver = ({\n active = true,\n onMutate,\n options = {\n attributes: true,\n characterData: true,\n childList: true,\n subtree: true,\n },\n ...rest\n}: UseMutationObserver) => {\n useEffect(() => {\n if (!active || typeof MutationObserver === \"undefined\") {\n return\n }\n\n const el = \"ref\" in rest ? rest.ref.current : rest.element\n\n if (el) {\n const observer = new MutationObserver(onMutate)\n\n // Start observing the target node for configured mutations\n observer.observe(el, options)\n\n return () => {\n observer.disconnect()\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onMutate, options, active])\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAiC,IAAAC,SAAA;AAAA,SAAAC,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AAWjC;AACA;AACA;AACO,IAAMc,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAUL;EAAA,IAAAC,WAAA,GAAAD,IAAA,CATzBE,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IACbE,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,YAAA,GAAAJ,IAAA,CACRK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG;MACRE,UAAU,EAAE,IAAI;MAChBC,aAAa,EAAE,IAAI;MACnBC,SAAS,EAAE,IAAI;MACfC,OAAO,EAAE;IACX,CAAC,GAAAL,YAAA;IACEM,IAAI,GAAA5B,wBAAA,CAAAkB,IAAA,EAAAnB,SAAA;EAEP,IAAA8B,gBAAS,EAAC,YAAM;IACd,IAAI,CAACT,MAAM,IAAI,OAAOU,gBAAgB,KAAK,WAAW,EAAE;MACtD;IACF;IAEA,IAAMC,EAAE,GAAG,KAAK,IAAIH,IAAI,GAAGA,IAAI,CAACI,GAAG,CAACC,OAAO,GAAGL,IAAI,CAACM,OAAO;IAE1D,IAAIH,EAAE,EAAE;MACN,IAAMI,QAAQ,GAAG,IAAIL,gBAAgB,CAACT,QAAQ,CAAC;;MAE/C;MACAc,QAAQ,CAACC,OAAO,CAACL,EAAE,EAAER,OAAO,CAAC;MAE7B,OAAO,YAAM;QACXY,QAAQ,CAACE,UAAU,EAAE;MACvB,CAAC;IACH;IACA;EACF,CAAC,EAAE,CAAChB,QAAQ,EAAEE,OAAO,EAAEH,MAAM,CAAC,CAAC;AACjC,CAAC;AAAAkB,OAAA,CAAArB,mBAAA,GAAAA,mBAAA"}
|
|
@@ -72,26 +72,27 @@ var usePosition = function usePosition(_ref) {
|
|
|
72
72
|
// Re-position when there's any change to the tooltip
|
|
73
73
|
(0, _useMutationObserver.useMutationObserver)({
|
|
74
74
|
ref: tooltipRef,
|
|
75
|
-
onMutate: update
|
|
75
|
+
onMutate: update,
|
|
76
|
+
active: active
|
|
76
77
|
});
|
|
77
78
|
|
|
78
79
|
// Re-position when there's any change to the anchor's size
|
|
79
80
|
(0, _useResizeObserver.useResizeObserver)({
|
|
80
81
|
target: anchorRef,
|
|
81
|
-
onResize: update
|
|
82
|
+
onResize: update,
|
|
83
|
+
active: active
|
|
82
84
|
});
|
|
83
85
|
|
|
84
86
|
// Listen to changes on key
|
|
85
87
|
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(update, [key]);
|
|
86
88
|
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
|
87
|
-
if (!tooltipRef.current || !anchorRef.current) return;
|
|
89
|
+
if (!active || !tooltipRef.current || !anchorRef.current) return;
|
|
88
90
|
var tooltip = tooltipRef.current;
|
|
89
91
|
var anchor = anchorRef.current;
|
|
90
92
|
tooltip.style.position = "fixed";
|
|
91
93
|
tooltip.style.top = "0";
|
|
92
94
|
tooltip.style.left = "0";
|
|
93
95
|
var handleScroll = function handleScroll() {
|
|
94
|
-
if (!active) return;
|
|
95
96
|
setState(placeTooltip({
|
|
96
97
|
anchor: anchor,
|
|
97
98
|
tooltip: tooltip,
|
|
@@ -101,11 +102,9 @@ var usePosition = function usePosition(_ref) {
|
|
|
101
102
|
clamp: clamp
|
|
102
103
|
}));
|
|
103
104
|
};
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
});
|
|
108
|
-
}
|
|
105
|
+
document.addEventListener("scroll", handleScroll, {
|
|
106
|
+
passive: true
|
|
107
|
+
});
|
|
109
108
|
var handleResize = function handleResize() {
|
|
110
109
|
setState(placeTooltip({
|
|
111
110
|
anchor: anchor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePosition.js","names":["_react","require","_useMutationObserver","_useIsomorphicLayoutEffect","_useResizeObserver","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","POSITION","top","bottom","left","right","exports","usePosition","_ref","key","position","_ref$offset","offset","_ref$active","active","_ref$flip","flip","_ref$clamp","clamp","_useState","useState","isFlipped","_useState2","state","setState","tooltipRef","useRef","anchorRef","update","current","tooltip","anchor","placeTooltip","useMutationObserver","ref","onMutate","useResizeObserver","target","onResize","useIsomorphicLayoutEffect","style","handleScroll","document","addEventListener","passive","handleResize","window","removeEventListener","_ref2","_ref2$offset","_ref2$boundaryRect","boundaryRect","getDocumentBoundingRect","_ref2$flip","_ref2$clamp","elementRect","getBoundingClientRect","tooltipRect","targetPosition","getPosition","shouldFlip","getOppositePosition","x","Math","max","min","width","y","height","shouldHide","isWithin","display","transform","translateWithOffset","_ref3","_ref4","concat","body","clientWidth","clientHeight","_ref5"],"sources":["../../src/utils/usePosition.ts"],"sourcesContent":["/**\n * Adapted from https://codesandbox.io/s/positioning-tooltip-rhplo\n */\nimport { useState } from \"react\"\nimport { useRef } from \"react\"\nimport { useMutationObserver } from \"./useMutationObserver\"\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\"\nimport { useResizeObserver } from \"./useResizeObserver\"\n\nexport const POSITION = {\n \"top-start\": \"top-start\",\n top: \"top\",\n \"top-end\": \"top-end\",\n \"bottom-start\": \"bottom-start\",\n bottom: \"bottom\",\n \"bottom-end\": \"bottom-end\",\n \"left-start\": \"left-start\",\n left: \"left\",\n \"left-end\": \"left-end\",\n \"right-start\": \"right-start\",\n right: \"right\",\n \"right-end\": \"right-end\",\n} as const\n\nexport type Position = keyof typeof POSITION\n\ninterface TargetPosition {\n x: number\n y: number\n}\n\n/**\n * Will position the floating element (tooltip) relative to the anchor element,\n * using `position: fixed` and in such a way that it shouldn't ever appear\n * partially offscreen and will move correctly when the parent is scrolled.\n */\nexport const usePosition = ({\n key,\n position,\n offset = 0,\n active = true,\n flip = true,\n clamp = true,\n}: {\n /** Listen to changes on this value */\n key?: string | number | boolean\n /** Placement relative to anchor */\n position: Position\n /** Distance from anchor (default: `0`) */\n offset?: number\n /** Optionally disable for performance (default: `true`) */\n active?: boolean\n /** Optionally disable flipping (default: `true`) */\n flip?: boolean\n /** Optionally disable clamping (default: `true`) */\n clamp?: boolean\n}) => {\n const [state, setState] = useState<ReturnType<typeof placeTooltip>>({\n isFlipped: false,\n })\n\n const tooltipRef = useRef<HTMLElement | null>(null)\n const anchorRef = useRef<HTMLElement | null>(null)\n\n const update = () => {\n if (!tooltipRef.current || !anchorRef.current) return\n\n const { current: tooltip } = tooltipRef\n const { current: anchor } = anchorRef\n\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n // Re-position when there's any change to the tooltip\n useMutationObserver({ ref: tooltipRef, onMutate: update })\n\n // Re-position when there's any change to the anchor's size\n useResizeObserver({ target: anchorRef, onResize: update })\n\n // Listen to changes on key\n useIsomorphicLayoutEffect(update, [key])\n\n useIsomorphicLayoutEffect(() => {\n if (!tooltipRef.current || !anchorRef.current) return\n\n const { current: tooltip } = tooltipRef\n const { current: anchor } = anchorRef\n\n tooltip.style.position = \"fixed\"\n tooltip.style.top = \"0\"\n tooltip.style.left = \"0\"\n\n const handleScroll = () => {\n if (!active) return\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n if (active) {\n document.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n })\n }\n\n const handleResize = () => {\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n window.addEventListener(\"resize\", handleResize, { passive: true })\n\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n\n return () => {\n document.removeEventListener(\"scroll\", handleScroll)\n window.removeEventListener(\"resize\", handleResize)\n }\n }, [active, tooltipRef, anchorRef, position])\n\n return {\n // Element that floating element is anchored to\n tooltipRef,\n // Element you want to position relative to the anchor\n anchorRef,\n state,\n }\n}\n\ninterface PlaceTooltip {\n anchor: HTMLElement\n tooltip: HTMLElement\n position: Position\n offset?: number\n boundaryRect?: DOMRect\n flip?: boolean\n clamp?: boolean\n}\n\nexport const placeTooltip = ({\n anchor,\n tooltip,\n position,\n offset = 0,\n boundaryRect = getDocumentBoundingRect(),\n flip = true,\n clamp = true,\n}: PlaceTooltip) => {\n const elementRect = anchor.getBoundingClientRect()\n const tooltipRect = tooltip.getBoundingClientRect()\n\n let targetPosition = getPosition(elementRect, tooltipRect, position)\n\n // Flip to avoid edges\n const isFlipped =\n flip &&\n shouldFlip({\n targetPosition,\n position,\n boundaryRect,\n tooltipRect,\n })\n\n if (isFlipped) {\n position = getOppositePosition(position)\n targetPosition = getPosition(elementRect, tooltipRect, position)\n }\n\n // Clamp position within boundary\n if (clamp) {\n targetPosition.x = Math.max(boundaryRect.left, targetPosition.x)\n targetPosition.x = Math.min(\n boundaryRect.right - tooltipRect.width,\n targetPosition.x\n )\n targetPosition.y = Math.max(boundaryRect.top, targetPosition.y)\n targetPosition.y = Math.min(\n boundaryRect.bottom - tooltipRect.height,\n targetPosition.y\n )\n }\n\n // Should hide entirely if it scrolls out of view\n const shouldHide = !isWithin(elementRect, boundaryRect)\n tooltip.style.display = shouldHide ? \"none\" : \"block\"\n\n tooltip.style.transform = translateWithOffset(\n targetPosition,\n position,\n offset\n )\n\n return { isFlipped }\n}\n\nexport const getPosition = (\n elementRect: Pick<\n DOMRect,\n \"width\" | \"height\" | \"top\" | \"right\" | \"bottom\" | \"left\"\n >,\n tooltipRect: Pick<DOMRect, \"width\" | \"height\">,\n position: Position\n): TargetPosition => {\n let x: number\n let y: number\n\n switch (position) {\n case \"top-start\":\n case \"bottom-start\":\n x = elementRect.left\n break\n case \"top\":\n case \"bottom\":\n x = elementRect.left + elementRect.width / 2 - tooltipRect.width / 2\n break\n case \"top-end\":\n case \"bottom-end\":\n x = elementRect.right - tooltipRect.width\n break\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n // [..] {XXX}\n x = elementRect.left - tooltipRect.width\n break\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n // {XXX} [...]\n x = elementRect.right\n break\n }\n\n switch (position) {\n case \"left-start\":\n case \"right-start\":\n y = elementRect.top\n break\n case \"left\":\n case \"right\":\n y = elementRect.top + elementRect.height / 2 - tooltipRect.height / 2\n break\n case \"left-end\":\n case \"right-end\":\n y = elementRect.bottom - tooltipRect.height\n break\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n // [..]\n // {XXX}\n y = elementRect.top - tooltipRect.height\n break\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n // {XXX}\n // [...]\n y = elementRect.bottom\n break\n }\n\n return { x, y }\n}\n\nexport const translateWithOffset = (\n targetPosition: TargetPosition,\n position: Position,\n offset: number\n) => {\n const [x, y] = (() => {\n switch (position) {\n case \"top-start\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"top\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"top-end\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"bottom-start\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"bottom\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"bottom-end\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"left-start\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"left\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"left-end\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"right-start\":\n return [targetPosition.x + offset, targetPosition.y]\n case \"right\":\n return [targetPosition.x + offset, targetPosition.y]\n case \"right-end\":\n return [targetPosition.x + offset, targetPosition.y]\n }\n })()\n\n return `translate(${x}px, ${y}px)`\n}\n\nconst getOppositePosition = (position: Position) => {\n switch (position) {\n case \"top-start\":\n return \"bottom-start\"\n case \"top\":\n return \"bottom\"\n case \"top-end\":\n return \"bottom-end\"\n case \"bottom-start\":\n return \"top-start\"\n case \"bottom\":\n return \"top\"\n case \"bottom-end\":\n return \"top-end\"\n case \"left-start\":\n return \"right-start\"\n case \"left\":\n return \"right\"\n case \"left-end\":\n return \"right-end\"\n case \"right-start\":\n return \"left-start\"\n case \"right\":\n return \"left\"\n case \"right-end\":\n return \"left-end\"\n }\n}\n\nexport const getDocumentBoundingRect = () => {\n const width = document.body.clientWidth\n const height = document.body.clientHeight\n\n return {\n top: 0,\n left: 0,\n right: width,\n bottom: height,\n width,\n height,\n } as DOMRect\n}\n\ninterface ShouldFlip {\n targetPosition: TargetPosition\n position: Position\n boundaryRect: Pick<DOMRect, \"top\" | \"right\" | \"bottom\" | \"left\">\n tooltipRect: Pick<DOMRect, \"width\" | \"height\">\n}\n\nexport const shouldFlip = ({\n targetPosition,\n position,\n boundaryRect,\n tooltipRect,\n}: ShouldFlip) => {\n switch (position) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return targetPosition.y < boundaryRect.top\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return targetPosition.y + tooltipRect.height > boundaryRect.bottom\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return targetPosition.x < boundaryRect.left\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return targetPosition.x + tooltipRect.width > boundaryRect.right\n }\n}\n\nconst isWithin = (elementRect: DOMRect, boundaryRect: DOMRect) => {\n return (\n boundaryRect.top < elementRect.bottom &&\n boundaryRect.left < elementRect.right &&\n boundaryRect.bottom > elementRect.top &&\n boundaryRect.right > elementRect.left\n )\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"usePosition.js","names":["_react","require","_useMutationObserver","_useIsomorphicLayoutEffect","_useResizeObserver","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","POSITION","top","bottom","left","right","exports","usePosition","_ref","key","position","_ref$offset","offset","_ref$active","active","_ref$flip","flip","_ref$clamp","clamp","_useState","useState","isFlipped","_useState2","state","setState","tooltipRef","useRef","anchorRef","update","current","tooltip","anchor","placeTooltip","useMutationObserver","ref","onMutate","useResizeObserver","target","onResize","useIsomorphicLayoutEffect","style","handleScroll","document","addEventListener","passive","handleResize","window","removeEventListener","_ref2","_ref2$offset","_ref2$boundaryRect","boundaryRect","getDocumentBoundingRect","_ref2$flip","_ref2$clamp","elementRect","getBoundingClientRect","tooltipRect","targetPosition","getPosition","shouldFlip","getOppositePosition","x","Math","max","min","width","y","height","shouldHide","isWithin","display","transform","translateWithOffset","_ref3","_ref4","concat","body","clientWidth","clientHeight","_ref5"],"sources":["../../src/utils/usePosition.ts"],"sourcesContent":["/**\n * Adapted from https://codesandbox.io/s/positioning-tooltip-rhplo\n */\nimport { useState } from \"react\"\nimport { useRef } from \"react\"\nimport { useMutationObserver } from \"./useMutationObserver\"\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\"\nimport { useResizeObserver } from \"./useResizeObserver\"\n\nexport const POSITION = {\n \"top-start\": \"top-start\",\n top: \"top\",\n \"top-end\": \"top-end\",\n \"bottom-start\": \"bottom-start\",\n bottom: \"bottom\",\n \"bottom-end\": \"bottom-end\",\n \"left-start\": \"left-start\",\n left: \"left\",\n \"left-end\": \"left-end\",\n \"right-start\": \"right-start\",\n right: \"right\",\n \"right-end\": \"right-end\",\n} as const\n\nexport type Position = keyof typeof POSITION\n\ninterface TargetPosition {\n x: number\n y: number\n}\n\n/**\n * Will position the floating element (tooltip) relative to the anchor element,\n * using `position: fixed` and in such a way that it shouldn't ever appear\n * partially offscreen and will move correctly when the parent is scrolled.\n */\nexport const usePosition = ({\n key,\n position,\n offset = 0,\n active = true,\n flip = true,\n clamp = true,\n}: {\n /** Listen to changes on this value */\n key?: string | number | boolean\n /** Placement relative to anchor */\n position: Position\n /** Distance from anchor (default: `0`) */\n offset?: number\n /** Optionally disable for performance (default: `true`) */\n active?: boolean\n /** Optionally disable flipping (default: `true`) */\n flip?: boolean\n /** Optionally disable clamping (default: `true`) */\n clamp?: boolean\n}) => {\n const [state, setState] = useState<ReturnType<typeof placeTooltip>>({\n isFlipped: false,\n })\n\n const tooltipRef = useRef<HTMLElement | null>(null)\n const anchorRef = useRef<HTMLElement | null>(null)\n\n const update = () => {\n if (!tooltipRef.current || !anchorRef.current) return\n\n const { current: tooltip } = tooltipRef\n const { current: anchor } = anchorRef\n\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n // Re-position when there's any change to the tooltip\n useMutationObserver({ ref: tooltipRef, onMutate: update, active })\n\n // Re-position when there's any change to the anchor's size\n useResizeObserver({ target: anchorRef, onResize: update, active })\n\n // Listen to changes on key\n useIsomorphicLayoutEffect(update, [key])\n\n useIsomorphicLayoutEffect(() => {\n if (!active || !tooltipRef.current || !anchorRef.current) return\n\n const { current: tooltip } = tooltipRef\n const { current: anchor } = anchorRef\n\n tooltip.style.position = \"fixed\"\n tooltip.style.top = \"0\"\n tooltip.style.left = \"0\"\n\n const handleScroll = () => {\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n document.addEventListener(\"scroll\", handleScroll, {\n passive: true,\n })\n\n const handleResize = () => {\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n }\n\n window.addEventListener(\"resize\", handleResize, { passive: true })\n\n setState(placeTooltip({ anchor, tooltip, position, offset, flip, clamp }))\n\n return () => {\n document.removeEventListener(\"scroll\", handleScroll)\n window.removeEventListener(\"resize\", handleResize)\n }\n }, [active, tooltipRef, anchorRef, position])\n\n return {\n // Element that floating element is anchored to\n tooltipRef,\n // Element you want to position relative to the anchor\n anchorRef,\n state,\n }\n}\n\ninterface PlaceTooltip {\n anchor: HTMLElement\n tooltip: HTMLElement\n position: Position\n offset?: number\n boundaryRect?: DOMRect\n flip?: boolean\n clamp?: boolean\n}\n\nexport const placeTooltip = ({\n anchor,\n tooltip,\n position,\n offset = 0,\n boundaryRect = getDocumentBoundingRect(),\n flip = true,\n clamp = true,\n}: PlaceTooltip) => {\n const elementRect = anchor.getBoundingClientRect()\n const tooltipRect = tooltip.getBoundingClientRect()\n\n let targetPosition = getPosition(elementRect, tooltipRect, position)\n\n // Flip to avoid edges\n const isFlipped =\n flip &&\n shouldFlip({\n targetPosition,\n position,\n boundaryRect,\n tooltipRect,\n })\n\n if (isFlipped) {\n position = getOppositePosition(position)\n targetPosition = getPosition(elementRect, tooltipRect, position)\n }\n\n // Clamp position within boundary\n if (clamp) {\n targetPosition.x = Math.max(boundaryRect.left, targetPosition.x)\n targetPosition.x = Math.min(\n boundaryRect.right - tooltipRect.width,\n targetPosition.x\n )\n targetPosition.y = Math.max(boundaryRect.top, targetPosition.y)\n targetPosition.y = Math.min(\n boundaryRect.bottom - tooltipRect.height,\n targetPosition.y\n )\n }\n\n // Should hide entirely if it scrolls out of view\n const shouldHide = !isWithin(elementRect, boundaryRect)\n tooltip.style.display = shouldHide ? \"none\" : \"block\"\n\n tooltip.style.transform = translateWithOffset(\n targetPosition,\n position,\n offset\n )\n\n return { isFlipped }\n}\n\nexport const getPosition = (\n elementRect: Pick<\n DOMRect,\n \"width\" | \"height\" | \"top\" | \"right\" | \"bottom\" | \"left\"\n >,\n tooltipRect: Pick<DOMRect, \"width\" | \"height\">,\n position: Position\n): TargetPosition => {\n let x: number\n let y: number\n\n switch (position) {\n case \"top-start\":\n case \"bottom-start\":\n x = elementRect.left\n break\n case \"top\":\n case \"bottom\":\n x = elementRect.left + elementRect.width / 2 - tooltipRect.width / 2\n break\n case \"top-end\":\n case \"bottom-end\":\n x = elementRect.right - tooltipRect.width\n break\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n // [..] {XXX}\n x = elementRect.left - tooltipRect.width\n break\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n // {XXX} [...]\n x = elementRect.right\n break\n }\n\n switch (position) {\n case \"left-start\":\n case \"right-start\":\n y = elementRect.top\n break\n case \"left\":\n case \"right\":\n y = elementRect.top + elementRect.height / 2 - tooltipRect.height / 2\n break\n case \"left-end\":\n case \"right-end\":\n y = elementRect.bottom - tooltipRect.height\n break\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n // [..]\n // {XXX}\n y = elementRect.top - tooltipRect.height\n break\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n // {XXX}\n // [...]\n y = elementRect.bottom\n break\n }\n\n return { x, y }\n}\n\nexport const translateWithOffset = (\n targetPosition: TargetPosition,\n position: Position,\n offset: number\n) => {\n const [x, y] = (() => {\n switch (position) {\n case \"top-start\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"top\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"top-end\":\n return [targetPosition.x, targetPosition.y - offset]\n case \"bottom-start\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"bottom\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"bottom-end\":\n return [targetPosition.x, targetPosition.y + offset]\n case \"left-start\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"left\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"left-end\":\n return [targetPosition.x - offset, targetPosition.y]\n case \"right-start\":\n return [targetPosition.x + offset, targetPosition.y]\n case \"right\":\n return [targetPosition.x + offset, targetPosition.y]\n case \"right-end\":\n return [targetPosition.x + offset, targetPosition.y]\n }\n })()\n\n return `translate(${x}px, ${y}px)`\n}\n\nconst getOppositePosition = (position: Position) => {\n switch (position) {\n case \"top-start\":\n return \"bottom-start\"\n case \"top\":\n return \"bottom\"\n case \"top-end\":\n return \"bottom-end\"\n case \"bottom-start\":\n return \"top-start\"\n case \"bottom\":\n return \"top\"\n case \"bottom-end\":\n return \"top-end\"\n case \"left-start\":\n return \"right-start\"\n case \"left\":\n return \"right\"\n case \"left-end\":\n return \"right-end\"\n case \"right-start\":\n return \"left-start\"\n case \"right\":\n return \"left\"\n case \"right-end\":\n return \"left-end\"\n }\n}\n\nexport const getDocumentBoundingRect = () => {\n const width = document.body.clientWidth\n const height = document.body.clientHeight\n\n return {\n top: 0,\n left: 0,\n right: width,\n bottom: height,\n width,\n height,\n } as DOMRect\n}\n\ninterface ShouldFlip {\n targetPosition: TargetPosition\n position: Position\n boundaryRect: Pick<DOMRect, \"top\" | \"right\" | \"bottom\" | \"left\">\n tooltipRect: Pick<DOMRect, \"width\" | \"height\">\n}\n\nexport const shouldFlip = ({\n targetPosition,\n position,\n boundaryRect,\n tooltipRect,\n}: ShouldFlip) => {\n switch (position) {\n case \"top-start\":\n case \"top\":\n case \"top-end\":\n return targetPosition.y < boundaryRect.top\n case \"bottom-start\":\n case \"bottom\":\n case \"bottom-end\":\n return targetPosition.y + tooltipRect.height > boundaryRect.bottom\n case \"left-start\":\n case \"left\":\n case \"left-end\":\n return targetPosition.x < boundaryRect.left\n case \"right-start\":\n case \"right\":\n case \"right-end\":\n return targetPosition.x + tooltipRect.width > boundaryRect.right\n }\n}\n\nconst isWithin = (elementRect: DOMRect, boundaryRect: DOMRect) => {\n return (\n boundaryRect.top < elementRect.bottom &&\n boundaryRect.left < elementRect.right &&\n boundaryRect.bottom > elementRect.top &&\n boundaryRect.right > elementRect.left\n )\n}\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAAuD,SAAAI,eAAAC,GAAA,EAAAC,CAAA,WAAAC,eAAA,CAAAF,GAAA,KAAAG,qBAAA,CAAAH,GAAA,EAAAC,CAAA,KAAAG,2BAAA,CAAAJ,GAAA,EAAAC,CAAA,KAAAI,gBAAA;AAAA,SAAAA,iBAAA,cAAAC,SAAA;AAAA,SAAAF,4BAAAG,CAAA,EAAAC,MAAA,SAAAD,CAAA,qBAAAA,CAAA,sBAAAE,iBAAA,CAAAF,CAAA,EAAAC,MAAA,OAAAE,CAAA,GAAAC,MAAA,CAAAC,SAAA,CAAAC,QAAA,CAAAC,IAAA,CAAAP,CAAA,EAAAQ,KAAA,aAAAL,CAAA,iBAAAH,CAAA,CAAAS,WAAA,EAAAN,CAAA,GAAAH,CAAA,CAAAS,WAAA,CAAAC,IAAA,MAAAP,CAAA,cAAAA,CAAA,mBAAAQ,KAAA,CAAAC,IAAA,CAAAZ,CAAA,OAAAG,CAAA,+DAAAU,IAAA,CAAAV,CAAA,UAAAD,iBAAA,CAAAF,CAAA,EAAAC,MAAA;AAAA,SAAAC,kBAAAT,GAAA,EAAAqB,GAAA,QAAAA,GAAA,YAAAA,GAAA,GAAArB,GAAA,CAAAsB,MAAA,EAAAD,GAAA,GAAArB,GAAA,CAAAsB,MAAA,WAAArB,CAAA,MAAAsB,IAAA,OAAAL,KAAA,CAAAG,GAAA,GAAApB,CAAA,GAAAoB,GAAA,EAAApB,CAAA,MAAAsB,IAAA,CAAAtB,CAAA,IAAAD,GAAA,CAAAC,CAAA,YAAAsB,IAAA;AAAA,SAAApB,sBAAAH,GAAA,EAAAC,CAAA,QAAAuB,EAAA,WAAAxB,GAAA,gCAAAyB,MAAA,IAAAzB,GAAA,CAAAyB,MAAA,CAAAC,QAAA,KAAA1B,GAAA,4BAAAwB,EAAA,QAAAG,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,EAAA,EAAAC,IAAA,OAAAC,EAAA,OAAAC,EAAA,iBAAAJ,EAAA,IAAAL,EAAA,GAAAA,EAAA,CAAAV,IAAA,CAAAd,GAAA,GAAAkC,IAAA,QAAAjC,CAAA,QAAAU,MAAA,CAAAa,EAAA,MAAAA,EAAA,UAAAQ,EAAA,uBAAAA,EAAA,IAAAL,EAAA,GAAAE,EAAA,CAAAf,IAAA,CAAAU,EAAA,GAAAW,IAAA,MAAAJ,IAAA,CAAAK,IAAA,CAAAT,EAAA,CAAAU,KAAA,GAAAN,IAAA,CAAAT,MAAA,KAAArB,CAAA,GAAA+B,EAAA,sBAAAM,GAAA,IAAAL,EAAA,OAAAL,EAAA,GAAAU,GAAA,yBAAAN,EAAA,YAAAR,EAAA,CAAAe,MAAA,KAAAT,EAAA,GAAAN,EAAA,CAAAe,MAAA,IAAA5B,MAAA,CAAAmB,EAAA,MAAAA,EAAA,2BAAAG,EAAA,QAAAL,EAAA,aAAAG,IAAA;AAAA,SAAA7B,gBAAAF,GAAA,QAAAkB,KAAA,CAAAsB,OAAA,CAAAxC,GAAA,UAAAA,GAAA,IAPvD;AACA;AACA;AAOO,IAAMyC,QAAQ,GAAG;EACtB,WAAW,EAAE,WAAW;EACxBC,GAAG,EAAE,KAAK;EACV,SAAS,EAAE,SAAS;EACpB,cAAc,EAAE,cAAc;EAC9BC,MAAM,EAAE,QAAQ;EAChB,YAAY,EAAE,YAAY;EAC1B,YAAY,EAAE,YAAY;EAC1BC,IAAI,EAAE,MAAM;EACZ,UAAU,EAAE,UAAU;EACtB,aAAa,EAAE,aAAa;EAC5BC,KAAK,EAAE,OAAO;EACd,WAAW,EAAE;AACf,CAAU;AAAAC,OAAA,CAAAL,QAAA,GAAAA,QAAA;AASV;AACA;AACA;AACA;AACA;AACO,IAAMM,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAoBlB;EAAA,IAnBJC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IACHC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAAC,WAAA,GAAAH,IAAA,CACRI,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,CAAC,GAAAA,WAAA;IAAAE,WAAA,GAAAL,IAAA,CACVM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,IAAI,GAAAA,WAAA;IAAAE,SAAA,GAAAP,IAAA,CACbQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,IAAI,GAAAA,SAAA;IAAAE,UAAA,GAAAT,IAAA,CACXU,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,IAAI,GAAAA,UAAA;EAeZ,IAAAE,SAAA,GAA0B,IAAAC,eAAQ,EAAkC;MAClEC,SAAS,EAAE;IACb,CAAC,CAAC;IAAAC,UAAA,GAAA/D,cAAA,CAAA4D,SAAA;IAFKI,KAAK,GAAAD,UAAA;IAAEE,QAAQ,GAAAF,UAAA;EAItB,IAAMG,UAAU,GAAG,IAAAC,aAAM,EAAqB,IAAI,CAAC;EACnD,IAAMC,SAAS,GAAG,IAAAD,aAAM,EAAqB,IAAI,CAAC;EAElD,IAAME,MAAM,GAAG,SAATA,MAAMA,CAAA,EAAS;IACnB,IAAI,CAACH,UAAU,CAACI,OAAO,IAAI,CAACF,SAAS,CAACE,OAAO,EAAE;IAE/C,IAAiBC,OAAO,GAAKL,UAAU,CAA/BI,OAAO;IACf,IAAiBE,MAAM,GAAKJ,SAAS,CAA7BE,OAAO;IAEfL,QAAQ,CAACQ,YAAY,CAAC;MAAED,MAAM,EAANA,MAAM;MAAED,OAAO,EAAPA,OAAO;MAAEpB,QAAQ,EAARA,QAAQ;MAAEE,MAAM,EAANA,MAAM;MAAEI,IAAI,EAAJA,IAAI;MAAEE,KAAK,EAALA;IAAM,CAAC,CAAC,CAAC;EAC5E,CAAC;;EAED;EACA,IAAAe,wCAAmB,EAAC;IAAEC,GAAG,EAAET,UAAU;IAAEU,QAAQ,EAAEP,MAAM;IAAEd,MAAM,EAANA;EAAO,CAAC,CAAC;;EAElE;EACA,IAAAsB,oCAAiB,EAAC;IAAEC,MAAM,EAAEV,SAAS;IAAEW,QAAQ,EAAEV,MAAM;IAAEd,MAAM,EAANA;EAAO,CAAC,CAAC;;EAElE;EACA,IAAAyB,oDAAyB,EAACX,MAAM,EAAE,CAACnB,GAAG,CAAC,CAAC;EAExC,IAAA8B,oDAAyB,EAAC,YAAM;IAC9B,IAAI,CAACzB,MAAM,IAAI,CAACW,UAAU,CAACI,OAAO,IAAI,CAACF,SAAS,CAACE,OAAO,EAAE;IAE1D,IAAiBC,OAAO,GAAKL,UAAU,CAA/BI,OAAO;IACf,IAAiBE,MAAM,GAAKJ,SAAS,CAA7BE,OAAO;IAEfC,OAAO,CAACU,KAAK,CAAC9B,QAAQ,GAAG,OAAO;IAChCoB,OAAO,CAACU,KAAK,CAACtC,GAAG,GAAG,GAAG;IACvB4B,OAAO,CAACU,KAAK,CAACpC,IAAI,GAAG,GAAG;IAExB,IAAMqC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzBjB,QAAQ,CAACQ,YAAY,CAAC;QAAED,MAAM,EAANA,MAAM;QAAED,OAAO,EAAPA,OAAO;QAAEpB,QAAQ,EAARA,QAAQ;QAAEE,MAAM,EAANA,MAAM;QAAEI,IAAI,EAAJA,IAAI;QAAEE,KAAK,EAALA;MAAM,CAAC,CAAC,CAAC;IAC5E,CAAC;IAEDwB,QAAQ,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,EAAE;MAChDG,OAAO,EAAE;IACX,CAAC,CAAC;IAEF,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzBrB,QAAQ,CAACQ,YAAY,CAAC;QAAED,MAAM,EAANA,MAAM;QAAED,OAAO,EAAPA,OAAO;QAAEpB,QAAQ,EAARA,QAAQ;QAAEE,MAAM,EAANA,MAAM;QAAEI,IAAI,EAAJA,IAAI;QAAEE,KAAK,EAALA;MAAM,CAAC,CAAC,CAAC;IAC5E,CAAC;IAED4B,MAAM,CAACH,gBAAgB,CAAC,QAAQ,EAAEE,YAAY,EAAE;MAAED,OAAO,EAAE;IAAK,CAAC,CAAC;IAElEpB,QAAQ,CAACQ,YAAY,CAAC;MAAED,MAAM,EAANA,MAAM;MAAED,OAAO,EAAPA,OAAO;MAAEpB,QAAQ,EAARA,QAAQ;MAAEE,MAAM,EAANA,MAAM;MAAEI,IAAI,EAAJA,IAAI;MAAEE,KAAK,EAALA;IAAM,CAAC,CAAC,CAAC;IAE1E,OAAO,YAAM;MACXwB,QAAQ,CAACK,mBAAmB,CAAC,QAAQ,EAAEN,YAAY,CAAC;MACpDK,MAAM,CAACC,mBAAmB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IACpD,CAAC;EACH,CAAC,EAAE,CAAC/B,MAAM,EAAEW,UAAU,EAAEE,SAAS,EAAEjB,QAAQ,CAAC,CAAC;EAE7C,OAAO;IACL;IACAe,UAAU,EAAVA,UAAU;IACV;IACAE,SAAS,EAATA,SAAS;IACTJ,KAAK,EAALA;EACF,CAAC;AACH,CAAC;AAAAjB,OAAA,CAAAC,WAAA,GAAAA,WAAA;AAYM,IAAMyB,YAAY,GAAG,SAAfA,YAAYA,CAAAgB,KAAA,EAQL;EAAA,IAPlBjB,MAAM,GAAAiB,KAAA,CAANjB,MAAM;IACND,OAAO,GAAAkB,KAAA,CAAPlB,OAAO;IACPpB,QAAQ,GAAAsC,KAAA,CAARtC,QAAQ;IAAAuC,YAAA,GAAAD,KAAA,CACRpC,MAAM;IAANA,MAAM,GAAAqC,YAAA,cAAG,CAAC,GAAAA,YAAA;IAAAC,kBAAA,GAAAF,KAAA,CACVG,YAAY;IAAZA,YAAY,GAAAD,kBAAA,cAAGE,uBAAuB,EAAE,GAAAF,kBAAA;IAAAG,UAAA,GAAAL,KAAA,CACxChC,IAAI;IAAJA,IAAI,GAAAqC,UAAA,cAAG,IAAI,GAAAA,UAAA;IAAAC,WAAA,GAAAN,KAAA,CACX9B,KAAK;IAALA,KAAK,GAAAoC,WAAA,cAAG,IAAI,GAAAA,WAAA;EAEZ,IAAMC,WAAW,GAAGxB,MAAM,CAACyB,qBAAqB,EAAE;EAClD,IAAMC,WAAW,GAAG3B,OAAO,CAAC0B,qBAAqB,EAAE;EAEnD,IAAIE,cAAc,GAAGC,WAAW,CAACJ,WAAW,EAAEE,WAAW,EAAE/C,QAAQ,CAAC;;EAEpE;EACA,IAAMW,SAAS,GACbL,IAAI,IACJ4C,UAAU,CAAC;IACTF,cAAc,EAAdA,cAAc;IACdhD,QAAQ,EAARA,QAAQ;IACRyC,YAAY,EAAZA,YAAY;IACZM,WAAW,EAAXA;EACF,CAAC,CAAC;EAEJ,IAAIpC,SAAS,EAAE;IACbX,QAAQ,GAAGmD,mBAAmB,CAACnD,QAAQ,CAAC;IACxCgD,cAAc,GAAGC,WAAW,CAACJ,WAAW,EAAEE,WAAW,EAAE/C,QAAQ,CAAC;EAClE;;EAEA;EACA,IAAIQ,KAAK,EAAE;IACTwC,cAAc,CAACI,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACb,YAAY,CAAC/C,IAAI,EAAEsD,cAAc,CAACI,CAAC,CAAC;IAChEJ,cAAc,CAACI,CAAC,GAAGC,IAAI,CAACE,GAAG,CACzBd,YAAY,CAAC9C,KAAK,GAAGoD,WAAW,CAACS,KAAK,EACtCR,cAAc,CAACI,CAAC,CACjB;IACDJ,cAAc,CAACS,CAAC,GAAGJ,IAAI,CAACC,GAAG,CAACb,YAAY,CAACjD,GAAG,EAAEwD,cAAc,CAACS,CAAC,CAAC;IAC/DT,cAAc,CAACS,CAAC,GAAGJ,IAAI,CAACE,GAAG,CACzBd,YAAY,CAAChD,MAAM,GAAGsD,WAAW,CAACW,MAAM,EACxCV,cAAc,CAACS,CAAC,CACjB;EACH;;EAEA;EACA,IAAME,UAAU,GAAG,CAACC,QAAQ,CAACf,WAAW,EAAEJ,YAAY,CAAC;EACvDrB,OAAO,CAACU,KAAK,CAAC+B,OAAO,GAAGF,UAAU,GAAG,MAAM,GAAG,OAAO;EAErDvC,OAAO,CAACU,KAAK,CAACgC,SAAS,GAAGC,mBAAmB,CAC3Cf,cAAc,EACdhD,QAAQ,EACRE,MAAM,CACP;EAED,OAAO;IAAES,SAAS,EAATA;EAAU,CAAC;AACtB,CAAC;AAAAf,OAAA,CAAA0B,YAAA,GAAAA,YAAA;AAEM,IAAM2B,WAAW,GAAG,SAAdA,WAAWA,CACtBJ,WAGC,EACDE,WAA8C,EAC9C/C,QAAkB,EACC;EACnB,IAAIoD,CAAS;EACb,IAAIK,CAAS;EAEb,QAAQzD,QAAQ;IACd,KAAK,WAAW;IAChB,KAAK,cAAc;MACjBoD,CAAC,GAAGP,WAAW,CAACnD,IAAI;MACpB;IACF,KAAK,KAAK;IACV,KAAK,QAAQ;MACX0D,CAAC,GAAGP,WAAW,CAACnD,IAAI,GAAGmD,WAAW,CAACW,KAAK,GAAG,CAAC,GAAGT,WAAW,CAACS,KAAK,GAAG,CAAC;MACpE;IACF,KAAK,SAAS;IACd,KAAK,YAAY;MACfJ,CAAC,GAAGP,WAAW,CAAClD,KAAK,GAAGoD,WAAW,CAACS,KAAK;MACzC;IACF,KAAK,YAAY;IACjB,KAAK,MAAM;IACX,KAAK,UAAU;MACb;MACAJ,CAAC,GAAGP,WAAW,CAACnD,IAAI,GAAGqD,WAAW,CAACS,KAAK;MACxC;IACF,KAAK,aAAa;IAClB,KAAK,OAAO;IACZ,KAAK,WAAW;MACd;MACAJ,CAAC,GAAGP,WAAW,CAAClD,KAAK;MACrB;EAAK;EAGT,QAAQK,QAAQ;IACd,KAAK,YAAY;IACjB,KAAK,aAAa;MAChByD,CAAC,GAAGZ,WAAW,CAACrD,GAAG;MACnB;IACF,KAAK,MAAM;IACX,KAAK,OAAO;MACViE,CAAC,GAAGZ,WAAW,CAACrD,GAAG,GAAGqD,WAAW,CAACa,MAAM,GAAG,CAAC,GAAGX,WAAW,CAACW,MAAM,GAAG,CAAC;MACrE;IACF,KAAK,UAAU;IACf,KAAK,WAAW;MACdD,CAAC,GAAGZ,WAAW,CAACpD,MAAM,GAAGsD,WAAW,CAACW,MAAM;MAC3C;IACF,KAAK,WAAW;IAChB,KAAK,KAAK;IACV,KAAK,SAAS;MACZ;MACA;MACAD,CAAC,GAAGZ,WAAW,CAACrD,GAAG,GAAGuD,WAAW,CAACW,MAAM;MACxC;IACF,KAAK,cAAc;IACnB,KAAK,QAAQ;IACb,KAAK,YAAY;MACf;MACA;MACAD,CAAC,GAAGZ,WAAW,CAACpD,MAAM;MACtB;EAAK;EAGT,OAAO;IAAE2D,CAAC,EAADA,CAAC;IAAEK,CAAC,EAADA;EAAE,CAAC;AACjB,CAAC;AAAA7D,OAAA,CAAAqD,WAAA,GAAAA,WAAA;AAEM,IAAMc,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAC9Bf,cAA8B,EAC9BhD,QAAkB,EAClBE,MAAc,EACX;EACH,IAAA8D,KAAA,GAAgB,YAAM;MACpB,QAAQhE,QAAQ;QACd,KAAK,WAAW;UACd,OAAO,CAACgD,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,KAAK;UACR,OAAO,CAAC8C,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,SAAS;UACZ,OAAO,CAAC8C,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,cAAc;UACjB,OAAO,CAAC8C,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,QAAQ;UACX,OAAO,CAAC8C,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,YAAY;UACf,OAAO,CAAC8C,cAAc,CAACI,CAAC,EAAEJ,cAAc,CAACS,CAAC,GAAGvD,MAAM,CAAC;QACtD,KAAK,YAAY;UACf,OAAO,CAAC8C,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;QACtD,KAAK,MAAM;UACT,OAAO,CAACT,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;QACtD,KAAK,UAAU;UACb,OAAO,CAACT,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;QACtD,KAAK,aAAa;UAChB,OAAO,CAACT,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;QACtD,KAAK,OAAO;UACV,OAAO,CAACT,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;QACtD,KAAK,WAAW;UACd,OAAO,CAACT,cAAc,CAACI,CAAC,GAAGlD,MAAM,EAAE8C,cAAc,CAACS,CAAC,CAAC;MAAA;IAE1D,CAAC,EAAG;IAAAQ,KAAA,GAAApH,cAAA,CAAAmH,KAAA;IA3BGZ,CAAC,GAAAa,KAAA;IAAER,CAAC,GAAAQ,KAAA;EA6BX,oBAAAC,MAAA,CAAoBd,CAAC,UAAAc,MAAA,CAAOT,CAAC;AAC/B,CAAC;AAAA7D,OAAA,CAAAmE,mBAAA,GAAAA,mBAAA;AAED,IAAMZ,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAInD,QAAkB,EAAK;EAClD,QAAQA,QAAQ;IACd,KAAK,WAAW;MACd,OAAO,cAAc;IACvB,KAAK,KAAK;MACR,OAAO,QAAQ;IACjB,KAAK,SAAS;MACZ,OAAO,YAAY;IACrB,KAAK,cAAc;MACjB,OAAO,WAAW;IACpB,KAAK,QAAQ;MACX,OAAO,KAAK;IACd,KAAK,YAAY;MACf,OAAO,SAAS;IAClB,KAAK,YAAY;MACf,OAAO,aAAa;IACtB,KAAK,MAAM;MACT,OAAO,OAAO;IAChB,KAAK,UAAU;MACb,OAAO,WAAW;IACpB,KAAK,aAAa;MAChB,OAAO,YAAY;IACrB,KAAK,OAAO;MACV,OAAO,MAAM;IACf,KAAK,WAAW;MACd,OAAO,UAAU;EAAA;AAEvB,CAAC;AAEM,IAAM0C,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAA,EAAS;EAC3C,IAAMc,KAAK,GAAGxB,QAAQ,CAACmC,IAAI,CAACC,WAAW;EACvC,IAAMV,MAAM,GAAG1B,QAAQ,CAACmC,IAAI,CAACE,YAAY;EAEzC,OAAO;IACL7E,GAAG,EAAE,CAAC;IACNE,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE6D,KAAK;IACZ/D,MAAM,EAAEiE,MAAM;IACdF,KAAK,EAALA,KAAK;IACLE,MAAM,EAANA;EACF,CAAC;AACH,CAAC;AAAA9D,OAAA,CAAA8C,uBAAA,GAAAA,uBAAA;AASM,IAAMQ,UAAU,GAAG,SAAbA,UAAUA,CAAAoB,KAAA,EAKL;EAAA,IAJhBtB,cAAc,GAAAsB,KAAA,CAAdtB,cAAc;IACdhD,QAAQ,GAAAsE,KAAA,CAARtE,QAAQ;IACRyC,YAAY,GAAA6B,KAAA,CAAZ7B,YAAY;IACZM,WAAW,GAAAuB,KAAA,CAAXvB,WAAW;EAEX,QAAQ/C,QAAQ;IACd,KAAK,WAAW;IAChB,KAAK,KAAK;IACV,KAAK,SAAS;MACZ,OAAOgD,cAAc,CAACS,CAAC,GAAGhB,YAAY,CAACjD,GAAG;IAC5C,KAAK,cAAc;IACnB,KAAK,QAAQ;IACb,KAAK,YAAY;MACf,OAAOwD,cAAc,CAACS,CAAC,GAAGV,WAAW,CAACW,MAAM,GAAGjB,YAAY,CAAChD,MAAM;IACpE,KAAK,YAAY;IACjB,KAAK,MAAM;IACX,KAAK,UAAU;MACb,OAAOuD,cAAc,CAACI,CAAC,GAAGX,YAAY,CAAC/C,IAAI;IAC7C,KAAK,aAAa;IAClB,KAAK,OAAO;IACZ,KAAK,WAAW;MACd,OAAOsD,cAAc,CAACI,CAAC,GAAGL,WAAW,CAACS,KAAK,GAAGf,YAAY,CAAC9C,KAAK;EAAA;AAEtE,CAAC;AAAAC,OAAA,CAAAsD,UAAA,GAAAA,UAAA;AAED,IAAMU,QAAQ,GAAG,SAAXA,QAAQA,CAAIf,WAAoB,EAAEJ,YAAqB,EAAK;EAChE,OACEA,YAAY,CAACjD,GAAG,GAAGqD,WAAW,CAACpD,MAAM,IACrCgD,YAAY,CAAC/C,IAAI,GAAGmD,WAAW,CAAClD,KAAK,IACrC8C,YAAY,CAAChD,MAAM,GAAGoD,WAAW,CAACrD,GAAG,IACrCiD,YAAY,CAAC9C,KAAK,GAAGkD,WAAW,CAACnD,IAAI;AAEzC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare type UseResizeObserver<T extends HTMLElement> = {
|
|
3
|
+
active?: boolean;
|
|
3
4
|
target: React.RefObject<T> | T | null;
|
|
4
5
|
onResize: UseResizeObserverCallback;
|
|
5
6
|
};
|
|
6
|
-
export declare const useResizeObserver: <T extends HTMLElement>({ target, onResize, }: UseResizeObserver<T>) => void;
|
|
7
|
+
export declare const useResizeObserver: <T extends HTMLElement>({ active, target, onResize, }: UseResizeObserver<T>) => void;
|
|
7
8
|
declare type UseResizeObserverCallback = (entry: ResizeObserverEntry, observer: ResizeObserver) => unknown;
|
|
8
9
|
export {};
|
|
@@ -11,12 +11,14 @@ var _useLatest = require("./useLatest");
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
var useResizeObserver = function useResizeObserver(_ref) {
|
|
14
|
-
var
|
|
14
|
+
var _ref$active = _ref.active,
|
|
15
|
+
active = _ref$active === void 0 ? true : _ref$active,
|
|
16
|
+
target = _ref.target,
|
|
15
17
|
onResize = _ref.onResize;
|
|
16
18
|
var resizeObserver = getResizeObserver();
|
|
17
19
|
var storedCallback = (0, _useLatest.useLatest)(onResize);
|
|
18
20
|
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
|
19
|
-
if (!resizeObserver) return;
|
|
21
|
+
if (!active || !resizeObserver) return;
|
|
20
22
|
var didUnsubscribe = false;
|
|
21
23
|
var targetEl = target && "current" in target ? target.current : target;
|
|
22
24
|
if (!targetEl) return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeObserver.js","names":["_useIsomorphicLayoutEffect","require","_useLatest","useResizeObserver","_ref","target","onResize","resizeObserver","getResizeObserver","storedCallback","useLatest","useIsomorphicLayoutEffect","didUnsubscribe","targetEl","current","cb","entry","observer","subscribe","unsubscribe","exports","createResizeObserver","ResizeObserver","ticking","allEntries","callbacks","Map","entries","obs","concat","window","requestAnimationFrame","triggered","Set","_loop","i","has","add","cbs","get","forEach","length","_ret","callback","_callbacks$get","observe","push","set","_callbacks$get2","unobserve","delete","cbIndex","indexOf","splice","_resizeObserver"],"sources":["../../src/utils/useResizeObserver.ts"],"sourcesContent":["/**\n * Adapted from https://github.com/jaredLunde/react-hook/blob/3c813dab5b21e26f2c85e733314ca5c063c6bfce/packages/resize-observer/src/index.tsx\n */\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\"\nimport { useLatest } from \"./useLatest\"\n\ntype UseResizeObserver<T extends HTMLElement> = {\n target: React.RefObject<T> | T | null\n onResize: UseResizeObserverCallback\n}\n\nexport const useResizeObserver = <T extends HTMLElement>({\n target,\n onResize,\n}: UseResizeObserver<T>) => {\n const resizeObserver = getResizeObserver()\n const storedCallback = useLatest(onResize)\n\n useIsomorphicLayoutEffect(() => {\n if (!resizeObserver) return\n\n let didUnsubscribe = false\n\n const targetEl = target && \"current\" in target ? target.current : target\n\n if (!targetEl) return\n\n const cb = (entry: ResizeObserverEntry, observer: ResizeObserver) => {\n if (didUnsubscribe) return\n\n storedCallback.current(entry, observer)\n }\n\n resizeObserver.subscribe(targetEl as HTMLElement, cb)\n\n return () => {\n didUnsubscribe = true\n resizeObserver.unsubscribe(targetEl as HTMLElement, cb)\n }\n }, [target, resizeObserver, storedCallback])\n}\n\nconst createResizeObserver = () => {\n if (typeof ResizeObserver === \"undefined\") return null\n\n let ticking = false\n let allEntries: ResizeObserverEntry[] = []\n\n const callbacks: Map<unknown, Array<UseResizeObserverCallback>> = new Map()\n\n const observer = new ResizeObserver(\n (entries: ResizeObserverEntry[], obs: ResizeObserver) => {\n allEntries = allEntries.concat(entries)\n\n if (!ticking) {\n window.requestAnimationFrame(() => {\n const triggered = new Set<Element>()\n\n for (let i = 0; i < allEntries.length; i++) {\n if (triggered.has(allEntries[i].target)) continue\n\n triggered.add(allEntries[i].target)\n\n const cbs = callbacks.get(allEntries[i].target)\n cbs?.forEach((cb) => cb(allEntries[i], obs))\n }\n\n allEntries = []\n ticking = false\n })\n }\n\n ticking = true\n }\n )\n\n return {\n observer,\n subscribe(target: HTMLElement, callback: UseResizeObserverCallback) {\n observer.observe(target)\n\n const cbs = callbacks.get(target) ?? []\n\n cbs.push(callback)\n callbacks.set(target, cbs)\n },\n unsubscribe(target: HTMLElement, callback: UseResizeObserverCallback) {\n const cbs = callbacks.get(target) ?? []\n\n if (cbs.length === 1) {\n observer.unobserve(target)\n callbacks.delete(target)\n return\n }\n\n const cbIndex = cbs.indexOf(callback)\n\n if (cbIndex !== -1) cbs.splice(cbIndex, 1)\n\n callbacks.set(target, cbs)\n },\n }\n}\n\nlet _resizeObserver: ReturnType<typeof createResizeObserver>\n\nconst getResizeObserver = () =>\n !_resizeObserver\n ? (_resizeObserver = createResizeObserver())\n : _resizeObserver\n\ntype UseResizeObserverCallback = (\n entry: ResizeObserverEntry,\n observer: ResizeObserver\n) => unknown\n"],"mappings":";;;;;;AAGA,IAAAA,0BAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAJA;AACA;AACA;;
|
|
1
|
+
{"version":3,"file":"useResizeObserver.js","names":["_useIsomorphicLayoutEffect","require","_useLatest","useResizeObserver","_ref","_ref$active","active","target","onResize","resizeObserver","getResizeObserver","storedCallback","useLatest","useIsomorphicLayoutEffect","didUnsubscribe","targetEl","current","cb","entry","observer","subscribe","unsubscribe","exports","createResizeObserver","ResizeObserver","ticking","allEntries","callbacks","Map","entries","obs","concat","window","requestAnimationFrame","triggered","Set","_loop","i","has","add","cbs","get","forEach","length","_ret","callback","_callbacks$get","observe","push","set","_callbacks$get2","unobserve","delete","cbIndex","indexOf","splice","_resizeObserver"],"sources":["../../src/utils/useResizeObserver.ts"],"sourcesContent":["/**\n * Adapted from https://github.com/jaredLunde/react-hook/blob/3c813dab5b21e26f2c85e733314ca5c063c6bfce/packages/resize-observer/src/index.tsx\n */\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\"\nimport { useLatest } from \"./useLatest\"\n\ntype UseResizeObserver<T extends HTMLElement> = {\n active?: boolean\n target: React.RefObject<T> | T | null\n onResize: UseResizeObserverCallback\n}\n\nexport const useResizeObserver = <T extends HTMLElement>({\n active = true,\n target,\n onResize,\n}: UseResizeObserver<T>) => {\n const resizeObserver = getResizeObserver()\n const storedCallback = useLatest(onResize)\n\n useIsomorphicLayoutEffect(() => {\n if (!active || !resizeObserver) return\n\n let didUnsubscribe = false\n\n const targetEl = target && \"current\" in target ? target.current : target\n\n if (!targetEl) return\n\n const cb = (entry: ResizeObserverEntry, observer: ResizeObserver) => {\n if (didUnsubscribe) return\n\n storedCallback.current(entry, observer)\n }\n\n resizeObserver.subscribe(targetEl as HTMLElement, cb)\n\n return () => {\n didUnsubscribe = true\n resizeObserver.unsubscribe(targetEl as HTMLElement, cb)\n }\n }, [target, resizeObserver, storedCallback])\n}\n\nconst createResizeObserver = () => {\n if (typeof ResizeObserver === \"undefined\") return null\n\n let ticking = false\n let allEntries: ResizeObserverEntry[] = []\n\n const callbacks: Map<unknown, Array<UseResizeObserverCallback>> = new Map()\n\n const observer = new ResizeObserver(\n (entries: ResizeObserverEntry[], obs: ResizeObserver) => {\n allEntries = allEntries.concat(entries)\n\n if (!ticking) {\n window.requestAnimationFrame(() => {\n const triggered = new Set<Element>()\n\n for (let i = 0; i < allEntries.length; i++) {\n if (triggered.has(allEntries[i].target)) continue\n\n triggered.add(allEntries[i].target)\n\n const cbs = callbacks.get(allEntries[i].target)\n cbs?.forEach((cb) => cb(allEntries[i], obs))\n }\n\n allEntries = []\n ticking = false\n })\n }\n\n ticking = true\n }\n )\n\n return {\n observer,\n subscribe(target: HTMLElement, callback: UseResizeObserverCallback) {\n observer.observe(target)\n\n const cbs = callbacks.get(target) ?? []\n\n cbs.push(callback)\n callbacks.set(target, cbs)\n },\n unsubscribe(target: HTMLElement, callback: UseResizeObserverCallback) {\n const cbs = callbacks.get(target) ?? []\n\n if (cbs.length === 1) {\n observer.unobserve(target)\n callbacks.delete(target)\n return\n }\n\n const cbIndex = cbs.indexOf(callback)\n\n if (cbIndex !== -1) cbs.splice(cbIndex, 1)\n\n callbacks.set(target, cbs)\n },\n }\n}\n\nlet _resizeObserver: ReturnType<typeof createResizeObserver>\n\nconst getResizeObserver = () =>\n !_resizeObserver\n ? (_resizeObserver = createResizeObserver())\n : _resizeObserver\n\ntype UseResizeObserverCallback = (\n entry: ResizeObserverEntry,\n observer: ResizeObserver\n) => unknown\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "36.
|
|
3
|
+
"version": "36.3.1",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
@@ -182,5 +182,5 @@
|
|
|
182
182
|
"url": "http://localhost"
|
|
183
183
|
}
|
|
184
184
|
},
|
|
185
|
-
"gitHead": "
|
|
185
|
+
"gitHead": "10b3223699b0057a4b48b4b215ccd057e7778e5e"
|
|
186
186
|
}
|