@consta/uikit 4.22.0 → 4.23.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.
Files changed (71) hide show
  1. package/BadgeGroup/index.d.ts +1 -0
  2. package/BadgeGroup/index.js +1 -0
  3. package/SpoilerCanary/index.d.ts +1 -0
  4. package/SpoilerCanary/index.js +1 -0
  5. package/__internal__/src/components/BadgeGroup/BadgeGroup.css +1 -0
  6. package/__internal__/src/components/BadgeGroup/BadgeGroup.d.ts +4 -0
  7. package/__internal__/src/components/BadgeGroup/BadgeGroup.js +2 -0
  8. package/__internal__/src/components/BadgeGroup/BadgeGroup.js.map +1 -0
  9. package/__internal__/src/components/BadgeGroup/helper.d.ts +35 -0
  10. package/__internal__/src/components/BadgeGroup/helper.js +2 -0
  11. package/__internal__/src/components/BadgeGroup/helper.js.map +1 -0
  12. package/__internal__/src/components/BadgeGroup/index.d.ts +1 -0
  13. package/__internal__/src/components/BadgeGroup/index.js +2 -0
  14. package/__internal__/src/components/BadgeGroup/index.js.map +1 -0
  15. package/__internal__/src/components/BadgeGroup/types.d.ts +47 -0
  16. package/__internal__/src/components/BadgeGroup/types.js +2 -0
  17. package/__internal__/src/components/BadgeGroup/types.js.map +1 -0
  18. package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.css +1 -1
  19. package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.js +1 -1
  20. package/__internal__/src/components/Collapse/CollapseIcon/CollapseIcon.js.map +1 -1
  21. package/__internal__/src/components/Slider/Slider.css +1 -1
  22. package/__internal__/src/components/Slider/Slider.js +1 -1
  23. package/__internal__/src/components/Slider/Slider.js.map +1 -1
  24. package/__internal__/src/components/Slider/SliderInput/SliderInput.css +1 -0
  25. package/__internal__/src/components/Slider/SliderInput/SliderInput.d.ts +1 -0
  26. package/__internal__/src/components/Slider/SliderInput/SliderInput.js +1 -1
  27. package/__internal__/src/components/Slider/SliderInput/SliderInput.js.map +1 -1
  28. package/__internal__/src/components/Slider/SliderLine/SliderLine.css +1 -1
  29. package/__internal__/src/components/Slider/SliderPoint/SliderPoint.css +1 -1
  30. package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js +1 -1
  31. package/__internal__/src/components/Slider/SliderPoint/SliderPoint.js.map +1 -1
  32. package/__internal__/src/components/Slider/helper.d.ts +4 -0
  33. package/__internal__/src/components/Slider/helper.js +1 -1
  34. package/__internal__/src/components/Slider/helper.js.map +1 -1
  35. package/__internal__/src/components/Slider/useSlider/helper.d.ts +1 -0
  36. package/__internal__/src/components/Slider/useSlider/helper.js +1 -1
  37. package/__internal__/src/components/Slider/useSlider/helper.js.map +1 -1
  38. package/__internal__/src/components/Slider/useSlider/useSlider.js +1 -1
  39. package/__internal__/src/components/Slider/useSlider/useSlider.js.map +1 -1
  40. package/__internal__/src/components/Slider/useSliderStationing.js +1 -1
  41. package/__internal__/src/components/Slider/useSliderStationing.js.map +1 -1
  42. package/__internal__/src/components/SpoilerCanary/Spoiler.css +1 -0
  43. package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.css +1 -0
  44. package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.d.ts +4 -0
  45. package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.js +2 -0
  46. package/__internal__/src/components/SpoilerCanary/SpoilerButton/SpoilerButton.js.map +1 -0
  47. package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.d.ts +1 -0
  48. package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.js +2 -0
  49. package/__internal__/src/components/SpoilerCanary/SpoilerButton/index.js.map +1 -0
  50. package/__internal__/src/components/SpoilerCanary/SpoilerCanary.d.ts +5 -0
  51. package/__internal__/src/components/SpoilerCanary/SpoilerCanary.js +2 -0
  52. package/__internal__/src/components/SpoilerCanary/SpoilerCanary.js.map +1 -0
  53. package/__internal__/src/components/SpoilerCanary/index.d.ts +2 -0
  54. package/__internal__/src/components/SpoilerCanary/index.js +2 -0
  55. package/__internal__/src/components/SpoilerCanary/index.js.map +1 -0
  56. package/__internal__/src/components/SpoilerCanary/types.d.ts +32 -0
  57. package/__internal__/src/components/SpoilerCanary/types.js +2 -0
  58. package/__internal__/src/components/SpoilerCanary/types.js.map +1 -0
  59. package/__internal__/src/hooks/useResizableContentCanary/helpers.d.ts +11 -0
  60. package/__internal__/src/hooks/useResizableContentCanary/helpers.js +2 -0
  61. package/__internal__/src/hooks/useResizableContentCanary/helpers.js.map +1 -0
  62. package/__internal__/src/hooks/useResizableContentCanary/index.d.ts +1 -0
  63. package/__internal__/src/hooks/useResizableContentCanary/index.js +2 -0
  64. package/__internal__/src/hooks/useResizableContentCanary/index.js.map +1 -0
  65. package/__internal__/src/hooks/useResizableContentCanary/types.d.ts +27 -0
  66. package/__internal__/src/hooks/useResizableContentCanary/types.js +2 -0
  67. package/__internal__/src/hooks/useResizableContentCanary/types.js.map +1 -0
  68. package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.d.ts +2 -0
  69. package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.js +2 -0
  70. package/__internal__/src/hooks/useResizableContentCanary/useResizableContent.js.map +1 -0
  71. package/package.json +1 -1
@@ -0,0 +1 @@
1
+ export * from "../__internal__/src/components/BadgeGroup";
@@ -0,0 +1 @@
1
+ export * from "../__internal__/src/components/BadgeGroup";
@@ -0,0 +1 @@
1
+ export * from "../__internal__/src/components/SpoilerCanary";
@@ -0,0 +1 @@
1
+ export * from "../__internal__/src/components/SpoilerCanary";
@@ -0,0 +1 @@
1
+ .BadgeGroup_size_l,.BadgeGroup_size_m{--badge-group-gap:var(--space-xs)}.BadgeGroup_size_s,.BadgeGroup_size_xs{--badge-group-gap:var(--space-2xs)}.BadgeGroup_fitMode_wrap{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--badge-group-gap);justify-content:flex-start}.BadgeGroup_fitMode_reduction{display:inline-flex}.BadgeGroup_fitMode_reduction>:not(.BadgeGroup-Badge_zero){margin-right:var(--badge-group-gap)}.BadgeGroup_fitMode_reduction>:not(.BadgeGroup-Badge_zero):last-child{margin-right:0}.BadgeGroup-Badge.Badge{position:static}.BadgeGroup-Badge_hidden.Badge{left:-300vw;position:absolute;visibility:hidden}.BadgeGroup-Badge_zero.Badge{display:none}
@@ -0,0 +1,4 @@
1
+ import './BadgeGroup.css';
2
+ import { BadgeGroupComponent } from './types';
3
+ export declare const BadgeGroup: BadgeGroupComponent;
4
+ export * from './types';
@@ -0,0 +1,2 @@
1
+ import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["items","fitMode","getItemAs","getItemAttributes","getItemIconLeft","getItemIconRight","getItemKey","getItemLabel","getItemStatus","getItemRef","getItemView","minified","size","form","className","moreRef","moreAttributes"];import"./BadgeGroup.css";import React,{forwardRef}from"react";import{useForkRef}from"../../hooks/useForkRef";import{useHideElementsInLine}from"../../hooks/useHideElementsInLine";import{cn}from"../../utils/bem";import{Badge,badgePropFormDefault,badgePropSizeDefault}from"../Badge/Badge";import{forkRef,withDefaultGetters}from"./helper";var cnBadgeGroup=cn("BadgeGroup"),BadgeGroupRender=function(a,b){var c=withDefaultGetters(a),d=c.items,e=c.fitMode,f=void 0===e?"wrap":e,g=c.getItemAs,h=c.getItemAttributes,i=c.getItemIconLeft,j=c.getItemIconRight,k=c.getItemKey,l=c.getItemLabel,m=c.getItemStatus,n=c.getItemRef,o=c.getItemView,p=c.minified,q=c.size,r=void 0===q?badgePropSizeDefault:q,s=c.form,t=void 0===s?badgePropFormDefault:s,u=c.className,v=c.moreRef,w=c.moreAttributes,x=_objectWithoutProperties(c,_excluded),y=useHideElementsInLine(d),z=y.visibleItems,A=y.itemsRefs,B=y.wrapperRef,C=y.hiddenItems,D=y.moreRef,E=useForkRef([D,v]);return React.createElement("div",Object.assign({ref:useForkRef([b,B]),className:cnBadgeGroup({size:r,fitMode:f},[u])},x),d.map(function(a,b){var c,d=g(a);return React.createElement(Badge,Object.assign({key:k(a),size:r,form:t,minified:p,label:l(a),iconLeft:i(a),iconRight:j(a),as:d,ref:forkRef([A[b],n(a)]),view:o(a),status:m(a),className:cnBadgeGroup("Badge",{hidden:!("reduction"!==f)&&!z[b]})},null!==(c=h(a))&&void 0!==c?c:{}))}),"reduction"===f&&React.createElement(Badge,Object.assign({className:cnBadgeGroup("Badge",{hidden:0>=C.length,zero:0>=C.length}),key:"more",label:"+".concat(C.length),status:"system",form:t,size:r,view:"filled",ref:E},w)))};export var BadgeGroup=forwardRef(BadgeGroupRender);export*from"./types";
2
+ //# sourceMappingURL=BadgeGroup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BadgeGroup.js","names":["React","forwardRef","useForkRef","useHideElementsInLine","cn","Badge","badgePropFormDefault","badgePropSizeDefault","forkRef","withDefaultGetters","cnBadgeGroup","BadgeGroupRender","props","ref","items","fitMode","getItemAs","getItemAttributes","getItemIconLeft","getItemIconRight","getItemKey","getItemLabel","getItemStatus","getItemRef","getItemView","minified","size","form","className","moreRefProp","moreRef","moreAttributes","otherProps","visibleItems","itemsRefs","wrapperRef","hiddenItems","hideMoreRef","map","item","index","as","hidden","length","zero","BadgeGroup"],"sources":["../../../../../src/components/BadgeGroup/BadgeGroup.tsx"],"sourcesContent":["import './BadgeGroup.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useHideElementsInLine } from '##/hooks/useHideElementsInLine';\nimport { cn } from '##/utils/bem';\n\nimport {\n Badge,\n badgePropFormDefault,\n badgePropSizeDefault,\n} from '../Badge/Badge';\nimport { forkRef, withDefaultGetters } from './helper';\nimport { BadgeGroupComponent, BadgeGroupProps } from './types';\n\nconst cnBadgeGroup = cn('BadgeGroup');\n\nconst BadgeGroupRender = (\n props: BadgeGroupProps,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const {\n items,\n fitMode = 'wrap',\n getItemAs,\n getItemAttributes,\n getItemIconLeft,\n getItemIconRight,\n getItemKey,\n getItemLabel,\n getItemStatus,\n getItemRef,\n getItemView,\n minified,\n size = badgePropSizeDefault,\n form = badgePropFormDefault,\n className,\n moreRef: moreRefProp,\n moreAttributes,\n ...otherProps\n } = withDefaultGetters(props);\n\n const {\n visibleItems,\n itemsRefs,\n wrapperRef,\n hiddenItems,\n moreRef: hideMoreRef,\n } = useHideElementsInLine(items);\n\n const moreRef = useForkRef([hideMoreRef, moreRefProp]);\n\n return (\n <div\n ref={useForkRef([ref, wrapperRef])}\n className={cnBadgeGroup({ size, fitMode }, [className])}\n {...otherProps}\n >\n {items.map((item, index) => {\n const as = getItemAs(item);\n return (\n <Badge\n key={getItemKey(item)}\n size={size}\n form={form}\n minified={minified}\n label={getItemLabel(item)}\n iconLeft={getItemIconLeft(item)}\n iconRight={getItemIconRight(item)}\n as={as}\n ref={forkRef([itemsRefs[index], getItemRef(item)])}\n view={getItemView(item)}\n status={getItemStatus(item)}\n className={cnBadgeGroup('Badge', {\n hidden: fitMode === 'reduction' ? !visibleItems[index] : false,\n })}\n {...(getItemAttributes(item) ?? {})}\n />\n );\n })}\n {fitMode === 'reduction' && (\n <Badge\n className={cnBadgeGroup('Badge', {\n hidden: hiddenItems.length <= 0,\n zero: hiddenItems.length <= 0,\n })}\n key=\"more\"\n label={`+${hiddenItems.length}`}\n status=\"system\"\n form={form}\n size={size}\n view=\"filled\"\n ref={moreRef}\n {...moreAttributes}\n />\n )}\n </div>\n );\n};\n\nexport const BadgeGroup = forwardRef(BadgeGroupRender) as BadgeGroupComponent;\n\nexport * from './types';\n"],"mappings":"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"}
@@ -0,0 +1,35 @@
1
+ /// <reference types="react" />
2
+ import { BadgeGroupDefaultItem, BadgeGroupPropGetItemAs, BadgeGroupPropGetItemAttributes, BadgeGroupPropGetItemIconLeft, BadgeGroupPropGetItemIconRight, BadgeGroupPropGetItemKey, BadgeGroupPropGetItemLabel, BadgeGroupPropGetItemRef, BadgeGroupPropGetItemStatus, BadgeGroupPropGetItemView, BadgeGroupProps } from './types';
3
+ export declare function withDefaultGetters<ITEM>(props: BadgeGroupProps<ITEM>): {
4
+ items: ITEM[];
5
+ fitMode?: "wrap" | "reduction" | undefined;
6
+ getItemKey?: BadgeGroupPropGetItemKey<ITEM> | undefined;
7
+ getItemLabel?: BadgeGroupPropGetItemLabel<ITEM> | undefined;
8
+ getItemStatus?: BadgeGroupPropGetItemStatus<ITEM> | undefined;
9
+ getItemView?: BadgeGroupPropGetItemView<ITEM> | undefined;
10
+ getItemIconLeft?: BadgeGroupPropGetItemIconLeft<ITEM> | undefined;
11
+ getItemIconRight?: BadgeGroupPropGetItemIconRight<ITEM> | undefined;
12
+ getItemRef?: BadgeGroupPropGetItemRef<ITEM> | undefined;
13
+ getItemAs?: BadgeGroupPropGetItemAs<ITEM> | undefined;
14
+ getItemAttributes?: BadgeGroupPropGetItemAttributes<ITEM> | undefined;
15
+ form?: "default" | "round" | undefined;
16
+ size?: "m" | "s" | "xs" | "l" | undefined;
17
+ minified?: boolean | undefined;
18
+ moreRef?: import("react").RefObject<HTMLDivElement> | undefined;
19
+ moreAttributes?: Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> | undefined;
20
+ } & Omit<import("react").HTMLAttributes<HTMLDivElement>, "css" | "size" | "form" | "items" | "getItemLabel" | "getItemKey" | "getItemStatus" | "getItemAs" | "getItemAttributes" | "getItemRef" | "minified" | "fitMode" | "getItemView" | "getItemIconLeft" | "getItemIconRight" | "moreRef" | "moreAttributes"> & import("react").RefAttributes<HTMLDivElement> & (ITEM extends {
21
+ key: string | number;
22
+ } ? {} : {
23
+ getItemKey: BadgeGroupPropGetItemKey<ITEM>;
24
+ }) & {
25
+ getItemKey: BadgeGroupPropGetItemKey<BadgeGroupDefaultItem> | BadgeGroupPropGetItemKey<ITEM>;
26
+ getItemLabel: BadgeGroupPropGetItemLabel<BadgeGroupDefaultItem> | BadgeGroupPropGetItemLabel<ITEM>;
27
+ getItemIconRight: BadgeGroupPropGetItemIconRight<BadgeGroupDefaultItem> | BadgeGroupPropGetItemIconRight<ITEM>;
28
+ getItemIconLeft: BadgeGroupPropGetItemIconLeft<BadgeGroupDefaultItem> | BadgeGroupPropGetItemIconLeft<ITEM>;
29
+ getItemView: BadgeGroupPropGetItemView<BadgeGroupDefaultItem> | BadgeGroupPropGetItemView<ITEM>;
30
+ getItemStatus: BadgeGroupPropGetItemStatus<BadgeGroupDefaultItem> | BadgeGroupPropGetItemStatus<ITEM>;
31
+ getItemRef: BadgeGroupPropGetItemRef<BadgeGroupDefaultItem> | BadgeGroupPropGetItemRef<ITEM>;
32
+ getItemAs: BadgeGroupPropGetItemAs<BadgeGroupDefaultItem> | BadgeGroupPropGetItemAs<ITEM>;
33
+ getItemAttributes: BadgeGroupPropGetItemAttributes<BadgeGroupDefaultItem> | BadgeGroupPropGetItemAttributes<ITEM>;
34
+ };
35
+ export declare const forkRef: <T>(refs: (import("react").Ref<T> | undefined)[]) => ((instance: T | null) => void) | null;
@@ -0,0 +1,2 @@
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";function _createForOfIteratorHelper(a,b){var c="undefined"!=typeof Symbol&&a[Symbol.iterator]||a["@@iterator"];if(!c){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=c.call(a)},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _unsupportedIterableToArray(a,b){if(a){if("string"==typeof a)return _arrayLikeToArray(a,b);var c=Object.prototype.toString.call(a).slice(8,-1);return"Object"===c&&a.constructor&&(c=a.constructor.name),"Map"===c||"Set"===c?Array.from(a):"Arguments"===c||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(c)?_arrayLikeToArray(a,b):void 0}}function _arrayLikeToArray(a,b){(null==b||b>a.length)&&(b=a.length);for(var c=0,d=Array(b);c<b;c++)d[c]=a[c];return d}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{setRef}from"../../utils/setRef";var defaultGetItemKey=function(a){return a.key},defaultGetItemIconRight=function(a){return a.iconRight},defaultGetItemIconLeft=function(a){return a.iconLeft},defaultGetItemStatus=function(a){return a.status},defaultGetItemView=function(a){return a.view},defaultGetItemLabel=function(a){return a.label},defaultGetItemAs=function(a){return a.as},defaultGetItemAttributes=function(a){return a.attributes},defaultGetItemRef=function(a){return a.ref};export function withDefaultGetters(a){return _objectSpread(_objectSpread({},a),{},{getItemKey:a.getItemKey||defaultGetItemKey,getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIconRight:a.getItemIconRight||defaultGetItemIconRight,getItemIconLeft:a.getItemIconLeft||defaultGetItemIconLeft,getItemView:a.getItemView||defaultGetItemView,getItemStatus:a.getItemStatus||defaultGetItemStatus,getItemRef:a.getItemRef||defaultGetItemRef,getItemAs:a.getItemAs||defaultGetItemAs,getItemAttributes:a.getItemAttributes||defaultGetItemAttributes})}export var forkRef=function(a){return a.length?function(b){var c,d=_createForOfIteratorHelper(a);try{for(d.s();!(c=d.n()).done;){var e=c.value;setRef(e,b)}}catch(a){d.e(a)}finally{d.f()}}:null};
2
+ //# sourceMappingURL=helper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"helper.js","names":["setRef","defaultGetItemKey","item","key","defaultGetItemIconRight","iconRight","defaultGetItemIconLeft","iconLeft","defaultGetItemStatus","status","defaultGetItemView","view","defaultGetItemLabel","label","defaultGetItemAs","as","defaultGetItemAttributes","attributes","defaultGetItemRef","ref","withDefaultGetters","props","getItemKey","getItemLabel","getItemIconRight","getItemIconLeft","getItemView","getItemStatus","getItemRef","getItemAs","getItemAttributes","forkRef","refs","length","refValue"],"sources":["../../../../../src/components/BadgeGroup/helper.ts"],"sourcesContent":["import { setRef } from '##/utils/setRef';\n\nimport {\n BadgeGroupDefaultItem,\n BadgeGroupPropGetItemAs,\n BadgeGroupPropGetItemAttributes,\n BadgeGroupPropGetItemIconLeft,\n BadgeGroupPropGetItemIconRight,\n BadgeGroupPropGetItemKey,\n BadgeGroupPropGetItemLabel,\n BadgeGroupPropGetItemRef,\n BadgeGroupPropGetItemStatus,\n BadgeGroupPropGetItemView,\n BadgeGroupProps,\n} from './types';\n\nconst defaultGetItemKey: BadgeGroupPropGetItemKey<BadgeGroupDefaultItem> = (\n item,\n) => item.key;\nconst defaultGetItemIconRight: BadgeGroupPropGetItemIconRight<\n BadgeGroupDefaultItem\n> = (item) => item.iconRight;\nconst defaultGetItemIconLeft: BadgeGroupPropGetItemIconLeft<\n BadgeGroupDefaultItem\n> = (item) => item.iconLeft;\nconst defaultGetItemStatus: BadgeGroupPropGetItemStatus<\n BadgeGroupDefaultItem\n> = (item) => item.status;\nconst defaultGetItemView: BadgeGroupPropGetItemView<BadgeGroupDefaultItem> = (\n item,\n) => item.view;\nconst defaultGetItemLabel: BadgeGroupPropGetItemLabel<BadgeGroupDefaultItem> = (\n item,\n) => item.label;\nconst defaultGetItemAs: BadgeGroupPropGetItemAs<BadgeGroupDefaultItem> = (\n item,\n) => item.as;\nconst defaultGetItemAttributes: BadgeGroupPropGetItemAttributes<\n BadgeGroupDefaultItem\n> = (item) => item.attributes;\nconst defaultGetItemRef: BadgeGroupPropGetItemRef<BadgeGroupDefaultItem> = (\n item,\n) => item.ref;\n\nexport function withDefaultGetters<ITEM>(props: BadgeGroupProps<ITEM>) {\n return {\n ...props,\n getItemKey: props.getItemKey || defaultGetItemKey,\n getItemLabel: props.getItemLabel || defaultGetItemLabel,\n getItemIconRight: props.getItemIconRight || defaultGetItemIconRight,\n getItemIconLeft: props.getItemIconLeft || defaultGetItemIconLeft,\n getItemView: props.getItemView || defaultGetItemView,\n getItemStatus: props.getItemStatus || defaultGetItemStatus,\n getItemRef: props.getItemRef || defaultGetItemRef,\n getItemAs: props.getItemAs || defaultGetItemAs,\n getItemAttributes: props.getItemAttributes || defaultGetItemAttributes,\n };\n}\n\nexport const forkRef = <T>(\n refs: (React.Ref<T> | undefined)[],\n): React.RefCallback<T> | null => {\n if (!refs.length) {\n return null;\n }\n return (refValue) => {\n for (const ref of refs) {\n setRef(ref as React.MutableRefObject<T>, refValue);\n }\n };\n};\n"],"mappings":"0zDAAA,OAASA,MAAT,0B,GAgBMC,kBAAkE,CAAG,SACzEC,CADyE,QAEtEA,EAAI,CAACC,GAFiE,C,CAGrEC,uBAEL,CAAG,SAACF,CAAD,QAAUA,EAAI,CAACG,SAAf,C,CACEC,sBAEL,CAAG,SAACJ,CAAD,QAAUA,EAAI,CAACK,QAAf,C,CACEC,oBAEL,CAAG,SAACN,CAAD,QAAUA,EAAI,CAACO,MAAf,C,CACEC,kBAAoE,CAAG,SAC3ER,CAD2E,QAExEA,EAAI,CAACS,IAFmE,C,CAGvEC,mBAAsE,CAAG,SAC7EV,CAD6E,QAE1EA,EAAI,CAACW,KAFqE,C,CAGzEC,gBAAgE,CAAG,SACvEZ,CADuE,QAEpEA,EAAI,CAACa,EAF+D,C,CAGnEC,wBAEL,CAAG,SAACd,CAAD,QAAUA,EAAI,CAACe,UAAf,C,CACEC,iBAAkE,CAAG,SACzEhB,CADyE,QAEtEA,EAAI,CAACiB,GAFiE,C,CAI3E,MAAO,SAASC,mBAAT,CAAkCC,CAAlC,CAAgE,CACrE,sCACKA,CADL,MAEEC,UAAU,CAAED,CAAK,CAACC,UAAN,EAAoBrB,iBAFlC,CAGEsB,YAAY,CAAEF,CAAK,CAACE,YAAN,EAAsBX,mBAHtC,CAIEY,gBAAgB,CAAEH,CAAK,CAACG,gBAAN,EAA0BpB,uBAJ9C,CAKEqB,eAAe,CAAEJ,CAAK,CAACI,eAAN,EAAyBnB,sBAL5C,CAMEoB,WAAW,CAAEL,CAAK,CAACK,WAAN,EAAqBhB,kBANpC,CAOEiB,aAAa,CAAEN,CAAK,CAACM,aAAN,EAAuBnB,oBAPxC,CAQEoB,UAAU,CAAEP,CAAK,CAACO,UAAN,EAAoBV,iBARlC,CASEW,SAAS,CAAER,CAAK,CAACQ,SAAN,EAAmBf,gBAThC,CAUEgB,iBAAiB,CAAET,CAAK,CAACS,iBAAN,EAA2Bd,wBAVhD,EAYD,CAED,MAAO,IAAMe,QAAO,CAAG,SACrBC,CADqB,CAEW,OAC3BA,EAAI,CAACC,MADsB,CAIzB,SAACC,CAAD,CAAc,oCACDF,CADC,MACnB,2BAAwB,IAAbb,EAAa,SACtBnB,MAAM,CAACmB,CAAD,CAAmCe,CAAnC,CACP,CAHkB,+BAIpB,CAR+B,CAEvB,IAOV,CAXM"}
@@ -0,0 +1 @@
1
+ export * from './BadgeGroup';
@@ -0,0 +1,2 @@
1
+ export*from"./BadgeGroup";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/BadgeGroup/index.ts"],"sourcesContent":["export * from './BadgeGroup';\n"],"mappings":"AAAA"}
@@ -0,0 +1,47 @@
1
+ import { IconComponent } from '@consta/icons/Icon';
2
+ import React from 'react';
3
+ import { PropsWithHTMLAttributesAndRef } from "../../utils/types/PropsWithHTMLAttributes";
4
+ import { BadgePropForm, BadgePropSize, BadgePropStatus, BadgePropView } from '../Badge/Badge';
5
+ export declare type BadgeGroupDefaultItem = {
6
+ key: string | number;
7
+ status?: BadgePropStatus;
8
+ view?: BadgePropView;
9
+ label?: string;
10
+ iconLeft?: IconComponent;
11
+ iconRight?: IconComponent;
12
+ as?: keyof JSX.IntrinsicElements;
13
+ ref?: React.RefObject<HTMLElement>;
14
+ attributes?: Omit<JSX.IntrinsicElements[keyof JSX.IntrinsicElements], 'children' | 'ref'>;
15
+ };
16
+ export declare type BadgeGroupPropGetItemKey<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['key'];
17
+ export declare type BadgeGroupPropGetItemStatus<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['status'];
18
+ export declare type BadgeGroupPropGetItemView<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['view'];
19
+ export declare type BadgeGroupPropGetItemLabel<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['label'];
20
+ export declare type BadgeGroupPropGetItemIconLeft<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['iconLeft'];
21
+ export declare type BadgeGroupPropGetItemIconRight<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['iconRight'];
22
+ export declare type BadgeGroupPropGetItemRef<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['ref'];
23
+ export declare type BadgeGroupPropGetItemAs<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['as'];
24
+ export declare type BadgeGroupPropGetItemAttributes<ITEM> = (item: ITEM) => BadgeGroupDefaultItem['attributes'];
25
+ export declare type BadgeGroupProps<ITEM = BadgeGroupDefaultItem> = PropsWithHTMLAttributesAndRef<{
26
+ items: ITEM[];
27
+ fitMode?: 'reduction' | 'wrap';
28
+ getItemKey?: BadgeGroupPropGetItemKey<ITEM>;
29
+ getItemLabel?: BadgeGroupPropGetItemLabel<ITEM>;
30
+ getItemStatus?: BadgeGroupPropGetItemStatus<ITEM>;
31
+ getItemView?: BadgeGroupPropGetItemView<ITEM>;
32
+ getItemIconLeft?: BadgeGroupPropGetItemIconLeft<ITEM>;
33
+ getItemIconRight?: BadgeGroupPropGetItemIconRight<ITEM>;
34
+ getItemRef?: BadgeGroupPropGetItemRef<ITEM>;
35
+ getItemAs?: BadgeGroupPropGetItemAs<ITEM>;
36
+ getItemAttributes?: BadgeGroupPropGetItemAttributes<ITEM>;
37
+ form?: BadgePropForm;
38
+ size?: BadgePropSize;
39
+ minified?: boolean;
40
+ moreRef?: React.RefObject<HTMLDivElement>;
41
+ moreAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
42
+ }, HTMLDivElement> & (ITEM extends {
43
+ key: string | number;
44
+ } ? {} : {
45
+ getItemKey: BadgeGroupPropGetItemKey<ITEM>;
46
+ });
47
+ export declare type BadgeGroupComponent = <ITEM = BadgeGroupDefaultItem>(props: BadgeGroupProps<ITEM>) => React.ReactElement | null;
@@ -0,0 +1,2 @@
1
+ export{};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","names":[],"sources":["../../../../../src/components/BadgeGroup/types.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '##/utils/types/PropsWithHTMLAttributes';\n\nimport {\n BadgePropForm,\n BadgePropSize,\n BadgePropStatus,\n BadgePropView,\n} from '../Badge/Badge';\n\nexport type BadgeGroupDefaultItem = {\n key: string | number;\n status?: BadgePropStatus;\n view?: BadgePropView;\n label?: string;\n iconLeft?: IconComponent;\n iconRight?: IconComponent;\n as?: keyof JSX.IntrinsicElements;\n ref?: React.RefObject<HTMLElement>;\n attributes?: Omit<\n JSX.IntrinsicElements[keyof JSX.IntrinsicElements],\n 'children' | 'ref'\n >;\n};\n\nexport type BadgeGroupPropGetItemKey<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['key'];\nexport type BadgeGroupPropGetItemStatus<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['status'];\nexport type BadgeGroupPropGetItemView<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['view'];\nexport type BadgeGroupPropGetItemLabel<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['label'];\nexport type BadgeGroupPropGetItemIconLeft<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['iconLeft'];\nexport type BadgeGroupPropGetItemIconRight<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['iconRight'];\nexport type BadgeGroupPropGetItemRef<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['ref'];\nexport type BadgeGroupPropGetItemAs<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['as'];\nexport type BadgeGroupPropGetItemAttributes<ITEM> = (\n item: ITEM,\n) => BadgeGroupDefaultItem['attributes'];\n\nexport type BadgeGroupProps<ITEM = BadgeGroupDefaultItem> =\n PropsWithHTMLAttributesAndRef<\n {\n items: ITEM[];\n fitMode?: 'reduction' | 'wrap';\n getItemKey?: BadgeGroupPropGetItemKey<ITEM>;\n getItemLabel?: BadgeGroupPropGetItemLabel<ITEM>;\n getItemStatus?: BadgeGroupPropGetItemStatus<ITEM>;\n getItemView?: BadgeGroupPropGetItemView<ITEM>;\n getItemIconLeft?: BadgeGroupPropGetItemIconLeft<ITEM>;\n getItemIconRight?: BadgeGroupPropGetItemIconRight<ITEM>;\n getItemRef?: BadgeGroupPropGetItemRef<ITEM>;\n getItemAs?: BadgeGroupPropGetItemAs<ITEM>;\n getItemAttributes?: BadgeGroupPropGetItemAttributes<ITEM>;\n form?: BadgePropForm;\n size?: BadgePropSize;\n minified?: boolean;\n moreRef?: React.RefObject<HTMLDivElement>;\n moreAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;\n },\n HTMLDivElement\n > &\n (ITEM extends { key: string | number }\n ? {}\n : {\n getItemKey: BadgeGroupPropGetItemKey<ITEM>;\n });\n\nexport type BadgeGroupComponent = <ITEM = BadgeGroupDefaultItem>(\n props: BadgeGroupProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":""}
@@ -1 +1 @@
1
- .CollapseIcon{color:var(--icon-color);transform:var(--direction-transform);transition:transform .3s;transition-timing-function:cubic-bezier(.7,0,.5,1)}.CollapseIcon_view_clear{--icon-color:var(--color-typo-primary)}.CollapseIcon_view_ghost{--icon-color:var(--color-control-typo-ghost)}.CollapseIcon_direction_up{--direction-transform:rotate(0deg)}.CollapseIcon_direction_right{--direction-transform:rotate(90deg)}.CollapseIcon_direction_down{--direction-transform:rotate(180deg)}.CollapseIcon_direction_left{--direction-transform:rotate(270deg)}.CollapseIcon_direction_upRight{--direction-transform:rotate(45deg)}.CollapseIcon_direction_downRight{--direction-transform:rotate(135deg)}.CollapseIcon_direction_downLeft{--direction-transform:rotate(225deg)}.CollapseIcon_direction_upLeft{--direction-transform:rotate(315deg)}.CollapseIcon_closeDirection_up{--close-direction-transform:rotate(0deg)}.CollapseIcon_closeDirection_right{--close-direction-transform:rotate(90deg)}.CollapseIcon_closeDirection_down{--close-direction-transform:rotate(180deg)}.CollapseIcon_closeDirection_left{--close-direction-transform:rotate(270deg)}.CollapseIcon_closeDirection_upRight{--close-direction-transform:rotate(45deg)}.CollapseIcon_closeDirection_downRight{--close-direction-transform:rotate(135deg)}.CollapseIcon_closeDirection_downLeft{--close-direction-transform:rotate(225deg)}.CollapseIcon_closeDirection_upLeft{--close-direction-transform:rotate(315deg)}.CollapseIcon_isOpen{transform:var(--close-direction-transform)}.CollapseIcon_animate_entered,.CollapseIcon_animate_entering{opacity:1;transform:scale(1)}.CollapseIcon_animate_exited,.CollapseIcon_animate_exiting{opacity:0;transform:scale(.1)}.CollapseIcon_animate_entered,.CollapseIcon_animate_entering,.CollapseIcon_animate_exiting{position:absolute;transition:transform .3s,opacity .3s}.CollapseIcon-Wrapper{position:relative}.CollapseIcon-Button{align-items:center;background:var(--color-control-bg-ghost);border-radius:50%;display:flex;height:var(--button-size);justify-content:center;width:var(--button-size)}.CollapseIcon-Button_size_xs{--button-size:var(--control-height-xs)}.CollapseIcon-Button_size_s{--button-size:var(--control-height-s)}
1
+ .CollapseIcon{color:var(--icon-color)}.CollapseIcon_view_clear{--icon-color:var(--color-typo-primary)}.CollapseIcon_view_ghost{--icon-color:var(--color-control-typo-ghost)}.CollapseIcon-Wrapper{position:relative}.CollapseIcon-Button{align-items:center;background:var(--color-control-bg-ghost);border-radius:50%;display:flex;height:var(--button-size);justify-content:center;width:var(--button-size)}.CollapseIcon-Button_size_xs{--button-size:var(--control-height-xs)}.CollapseIcon-Button_size_s{--button-size:var(--control-height-s)}
@@ -1,2 +1,2 @@
1
- import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","icon","closeIcon","direction","closeDirection","isOpen","className","view"];import"./CollapseIcon.css";import{cnIcon}from"@consta/icons/Icon";import React,{useRef}from"react";import{Transition}from"react-transition-group";import{cn}from"../../../utils/bem";var cnCollapseIcon=cn("CollapseIcon"),animateTimeout=300,CollapseIconButton=function(a){var b=a.children,c=a.className,d=a.size;return React.createElement("div",{className:cnCollapseIcon("Button",{size:d},[c])},b)},GuardFragment=function(a){return React.createElement(React.Fragment,null,a.children)};export var CollapseIcon=function(a){var b=a.size,c=a.icon,d=a.closeIcon,e=a.direction,f=a.closeDirection,g=a.isOpen,h=a.className,i=a.view,j=_objectWithoutProperties(a,_excluded),k=useRef(null),l=useRef(null),m="ghost"===i?CollapseIconButton:GuardFragment,n="ghost"===i?h:void 0,o="clear"===i?h:void 0;return React.createElement(m,{size:b,className:n},function renderIcon(){return d?React.createElement("span",{className:cnCollapseIcon("Wrapper",[cnIcon({size:b}),o])},React.createElement(Transition,{in:!g,unmountOnExit:!0,timeout:animateTimeout,nodeRef:k},function(a){return React.createElement(c,Object.assign({},j,{className:cnCollapseIcon({animate:a,view:i}),size:b,ref:k}))}),React.createElement(Transition,{in:g,unmountOnExit:!0,timeout:animateTimeout,nodeRef:l},function(a){return React.createElement(d,Object.assign({},j,{className:cnCollapseIcon({animate:a,view:i}),size:b,ref:l}))})):React.createElement(c,Object.assign({},j,{className:cnCollapseIcon({isOpen:g,direction:e,closeDirection:f,view:i},[o]),size:b}))}())};
1
+ import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","icon","closeIcon","direction","closeDirection","isOpen","className","view"];import"./CollapseIcon.css";import{AnimateIconSwitcher}from"@consta/icons/AnimateIconSwitcher";import React from"react";import{cn}from"../../../utils/bem";var cnCollapseIcon=cn("CollapseIcon"),CollapseIconButton=function(a){var b=a.children,c=a.className,d=a.size;return React.createElement("div",{className:cnCollapseIcon("Button",{size:d},[c])},b)},GuardFragment=function(a){return React.createElement(React.Fragment,null,a.children)},directionsMap={up:0,right:90,down:180,left:270,upRight:45,downRight:135,downLeft:225,upLeft:315};export var CollapseIcon=function(a){var b=a.size,c=a.icon,d=a.closeIcon,e=a.direction,f=a.closeDirection,g=a.isOpen,h=a.className,i=a.view,j=_objectWithoutProperties(a,_excluded),k="ghost"===i?CollapseIconButton:GuardFragment,l="ghost"===i?h:void 0,m="clear"===i?h:void 0;return React.createElement(k,{size:b,className:l},React.createElement(AnimateIconSwitcher,Object.assign({startIcon:c,endIcon:d,transition:300,size:b,active:g,className:cnCollapseIcon({view:i},[m]),startDirection:!d&&e?directionsMap[e]:void 0,endDirection:!d&&f?directionsMap[f]:void 0},j)))};
2
2
  //# sourceMappingURL=CollapseIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CollapseIcon.js","names":["cnIcon","React","useRef","Transition","cn","cnCollapseIcon","animateTimeout","CollapseIconButton","children","className","size","GuardFragment","props","CollapseIcon","Icon","icon","CloseIcon","closeIcon","direction","closeDirection","isOpen","view","otherProps","iconRef","closeIconRef","Wrapper","wrapperClassName","renderIconClassName","renderIcon","animate"],"sources":["../../../../../../src/components/Collapse/CollapseIcon/CollapseIcon.tsx"],"sourcesContent":["import './CollapseIcon.css';\n\nimport { cnIcon } from '@consta/icons/Icon';\nimport React, { useRef } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { cn } from '##/utils/bem';\n\nimport { CollapseIconProps } from '../types';\n\nconst cnCollapseIcon = cn('CollapseIcon');\nconst animateTimeout = 300;\n\nconst CollapseIconButton = ({\n children,\n className,\n size,\n}: {\n children?: React.ReactNode;\n className?: string;\n size: CollapseIconProps['size'];\n}) => {\n return (\n <div className={cnCollapseIcon('Button', { size }, [className])}>\n {children}\n </div>\n );\n};\n\nconst GuardFragment = (props: { children?: React.ReactNode }) => (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>{props.children}</>\n);\n\nexport const CollapseIcon: React.FC<CollapseIconProps> = (props) => {\n const {\n size,\n icon: Icon,\n closeIcon: CloseIcon,\n direction,\n closeDirection,\n isOpen,\n className,\n view,\n ...otherProps\n } = props;\n\n const iconRef = useRef<HTMLSpanElement>(null);\n const closeIconRef = useRef<HTMLSpanElement>(null);\n\n const Wrapper = view === 'ghost' ? CollapseIconButton : GuardFragment;\n const wrapperClassName = view === 'ghost' ? className : undefined;\n const renderIconClassName = view === 'clear' ? className : undefined;\n\n const renderIcon = () => {\n if (CloseIcon) {\n return (\n <span\n className={cnCollapseIcon('Wrapper', [\n cnIcon({ size }),\n renderIconClassName,\n ])}\n >\n <Transition\n in={!isOpen}\n unmountOnExit\n timeout={animateTimeout}\n nodeRef={iconRef}\n >\n {(animate) => (\n <Icon\n {...otherProps}\n className={cnCollapseIcon({ animate, view })}\n size={size}\n ref={iconRef}\n />\n )}\n </Transition>\n <Transition\n in={isOpen}\n unmountOnExit\n timeout={animateTimeout}\n nodeRef={closeIconRef}\n >\n {(animate) => (\n <CloseIcon\n {...otherProps}\n className={cnCollapseIcon({ animate, view })}\n size={size}\n ref={closeIconRef}\n />\n )}\n </Transition>\n </span>\n );\n }\n return (\n <Icon\n {...otherProps}\n className={cnCollapseIcon({ isOpen, direction, closeDirection, view }, [\n renderIconClassName,\n ])}\n size={size}\n />\n );\n };\n\n return (\n <Wrapper size={size} className={wrapperClassName}>\n {renderIcon()}\n </Wrapper>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"CollapseIcon.js","names":["AnimateIconSwitcher","React","cn","cnCollapseIcon","CollapseIconButton","children","className","size","GuardFragment","props","directionsMap","up","right","down","left","upRight","downRight","downLeft","upLeft","CollapseIcon","Icon","icon","CloseIcon","closeIcon","direction","closeDirection","isOpen","view","otherProps","Wrapper","wrapperClassName","renderIconClassName"],"sources":["../../../../../../src/components/Collapse/CollapseIcon/CollapseIcon.tsx"],"sourcesContent":["import './CollapseIcon.css';\n\nimport { AnimateIconSwitcher } from '@consta/icons/AnimateIconSwitcher';\nimport React from 'react';\n\nimport { cn } from '##/utils/bem';\n\nimport { CollapseIconPropDirection, CollapseIconProps } from '../types';\n\nconst cnCollapseIcon = cn('CollapseIcon');\n\nconst CollapseIconButton = ({\n children,\n className,\n size,\n}: {\n children?: React.ReactNode;\n className?: string;\n size: CollapseIconProps['size'];\n}) => {\n return (\n <div className={cnCollapseIcon('Button', { size }, [className])}>\n {children}\n </div>\n );\n};\n\nconst GuardFragment = (props: { children?: React.ReactNode }) => (\n // eslint-disable-next-line react/jsx-no-useless-fragment\n <>{props.children}</>\n);\n\nconst directionsMap: Record<CollapseIconPropDirection, number> = {\n up: 0,\n right: 90,\n down: 180,\n left: 270,\n upRight: 45,\n downRight: 135,\n downLeft: 225,\n upLeft: 315,\n};\n\nexport const CollapseIcon: React.FC<CollapseIconProps> = (props) => {\n const {\n size,\n icon: Icon,\n closeIcon: CloseIcon,\n direction,\n closeDirection,\n isOpen,\n className,\n view,\n ...otherProps\n } = props;\n\n const Wrapper = view === 'ghost' ? CollapseIconButton : GuardFragment;\n const wrapperClassName = view === 'ghost' ? className : undefined;\n const renderIconClassName = view === 'clear' ? className : undefined;\n\n return (\n <Wrapper size={size} className={wrapperClassName}>\n <AnimateIconSwitcher\n startIcon={Icon}\n endIcon={CloseIcon}\n transition={300}\n size={size}\n active={isOpen}\n className={cnCollapseIcon({ view }, [renderIconClassName])}\n startDirection={\n !CloseIcon && direction ? directionsMap[direction] : undefined\n }\n endDirection={\n !CloseIcon && closeDirection\n ? directionsMap[closeDirection]\n : undefined\n }\n {...otherProps}\n />\n </Wrapper>\n );\n};\n"],"mappings":"wLAAA,2BAEA,OAASA,mBAAT,KAAoC,mCAApC,CACA,MAAOC,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0B,GAIMC,eAAc,CAAGD,EAAE,CAAC,cAAD,C,CAEnBE,kBAAkB,CAAG,WAQrB,IAPJC,EAOI,GAPJA,QAOI,CANJC,CAMI,GANJA,SAMI,CALJC,CAKI,GALJA,IAKI,CACJ,MACE,4BAAK,SAAS,CAAEJ,cAAc,CAAC,QAAD,CAAW,CAAEI,IAAI,CAAJA,CAAF,CAAX,CAAqB,CAACD,CAAD,CAArB,CAA9B,EACGD,CADH,CAIH,C,CAEKG,aAAa,CAAG,SAACC,CAAD,QAEpB,yCAAGA,CAAK,CAACJ,QAAT,CAFoB,C,CAKhBK,aAAwD,CAAG,CAC/DC,EAAE,CAAE,CAD2D,CAE/DC,KAAK,CAAE,EAFwD,CAG/DC,IAAI,CAAE,GAHyD,CAI/DC,IAAI,CAAE,GAJyD,CAK/DC,OAAO,CAAE,EALsD,CAM/DC,SAAS,CAAE,GANoD,CAO/DC,QAAQ,CAAE,GAPqD,CAQ/DC,MAAM,CAAE,GARuD,C,CAWjE,MAAO,IAAMC,aAAyC,CAAG,SAACV,CAAD,CAAW,IAEhEF,EAFgE,CAW9DE,CAX8D,CAEhEF,IAFgE,CAG1Da,CAH0D,CAW9DX,CAX8D,CAGhEY,IAHgE,CAIrDC,CAJqD,CAW9Db,CAX8D,CAIhEc,SAJgE,CAKhEC,CALgE,CAW9Df,CAX8D,CAKhEe,SALgE,CAMhEC,CANgE,CAW9DhB,CAX8D,CAMhEgB,cANgE,CAOhEC,CAPgE,CAW9DjB,CAX8D,CAOhEiB,MAPgE,CAQhEpB,CARgE,CAW9DG,CAX8D,CAQhEH,SARgE,CAShEqB,CATgE,CAW9DlB,CAX8D,CAShEkB,IATgE,CAU7DC,CAV6D,0BAW9DnB,CAX8D,YAa5DoB,CAAO,CAAY,OAAT,GAAAF,CAAI,CAAevB,kBAAf,CAAoCI,aAbU,CAc5DsB,CAAgB,CAAY,OAAT,GAAAH,CAAI,CAAerB,CAAf,OAdqC,CAe5DyB,CAAmB,CAAY,OAAT,GAAAJ,CAAI,CAAerB,CAAf,OAfkC,CAiBlE,MACE,qBAAC,CAAD,EAAS,IAAI,CAAEC,CAAf,CAAqB,SAAS,CAAEuB,CAAhC,EACE,oBAAC,mBAAD,gBACE,SAAS,CAAEV,CADb,CAEE,OAAO,CAAEE,CAFX,CAGE,UAAU,CAAE,GAHd,CAIE,IAAI,CAAEf,CAJR,CAKE,MAAM,CAAEmB,CALV,CAME,SAAS,CAAEvB,cAAc,CAAC,CAAEwB,IAAI,CAAJA,CAAF,CAAD,CAAW,CAACI,CAAD,CAAX,CAN3B,CAOE,cAAc,CACZ,CAACT,CAAD,EAAcE,CAAd,CAA0Bd,aAAa,CAACc,CAAD,CAAvC,OARJ,CAUE,YAAY,CACV,CAACF,CAAD,EAAcG,CAAd,CACIf,aAAa,CAACe,CAAD,CADjB,OAXJ,EAeMG,CAfN,EADF,CAoBH,CAtCM"}
@@ -1 +1 @@
1
- .Slider{--slider-side-margin:0;--slider-container-margin:0;display:inline-flex;flex-direction:column;width:100%}.Slider_size_xs{--slider-container-margin:var(--space-2xs);--slider-side-margin:var(--space-xs)}.Slider_size_m,.Slider_size_s{--slider-container-margin:var(--space-2xs);--slider-side-margin:var(--space-s)}.Slider_size_l{--slider-container-margin:var(--space-xs);--slider-side-margin:var(--space-l)}.Slider-Label{margin-bottom:var(--slider-container-margin)}.Slider-Caption{margin-top:var(--slider-container-margin)}.Slider-Container{min-height:var(--space-m)}.Slider-Container,.Slider-Control{align-items:center;display:inline-flex;position:relative;width:100%}.Slider-Control{height:var(--space-m);-webkit-user-select:none;-moz-user-select:none;user-select:none}.Slider-Side{align-items:center;display:flex}.Slider-Side_position_left{margin-right:var(--slider-side-margin)}.Slider-Side_position_right{margin-left:var(--slider-side-margin)}
1
+ .Slider{--slider-side-margin:0;--slider-container-margin:0;display:inline-flex;flex-direction:column;touch-action:none;width:100%}.Slider_size_xs{--slider-container-margin:var(--space-2xs);--slider-side-margin:var(--space-xs)}.Slider_size_m,.Slider_size_s{--slider-container-margin:var(--space-2xs);--slider-side-margin:var(--space-s)}.Slider_size_l{--slider-container-margin:var(--space-xs);--slider-side-margin:var(--space-l)}.Slider-Label{margin-bottom:var(--slider-container-margin)}.Slider-Caption{margin-top:var(--slider-container-margin)}.Slider-Container{min-height:var(--space-m)}.Slider-Container,.Slider-Control{align-items:center;display:inline-flex;position:relative;width:100%}.Slider-Control{height:var(--space-m);-webkit-user-select:none;-moz-user-select:none;user-select:none}.Slider-Side{align-items:center;display:flex}.Slider-Side_position_left{margin-right:var(--slider-side-margin)}.Slider-Side_position_right{margin-left:var(--slider-side-margin)}
@@ -1,2 +1,2 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef}from"react";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{useFlag}from"../../hooks/useFlag";import{useSortSteps}from"../../hooks/useSortSteps";import{cn}from"../../utils/bem";import{defaultPropSize,defaultTooltipFormatter,getIcon,getMaxForStartField,getMinForEndField,getOnChandgeForInput,getValueForInput}from"./helper";import{SliderInput}from"./SliderInput/SliderInput";import{SliderLine}from"./SliderLine/SliderLine";import{SliderPoint}from"./SliderPoint/SliderPoint";import{useSlider}from"./useSlider/useSlider";import{useSliderStationing}from"./useSliderStationing";var cnSlider=cn("Slider"),sizeMap={xs:"xs",s:"s",m:"m",l:"m"};export var COMPONENT_NAME="Slider";var SliderRender=function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.min,f=void 0===e?0:e,g=d.max,h=void 0===g?100:g,i=d.onChange,j=d.onAfterChange,k=d.value,l=d.step,m=d.disabled,n=void 0!==m&&m,o=d.size,p=void 0===o?defaultPropSize:o,q=d.view,r=void 0===q?"default":q,s=d.leftSide,t=d.rightSide,u=d.withTooltip,v=d.range,w=void 0!==v&&v,x=d.label,y=d.labelIcon,z=d.status,A=d.caption,B=d.tooltipFormatter,C=void 0===B?defaultTooltipFormatter:B,D=d.className,E=d.style,F=_objectWithoutProperties(d,_excluded),G=useFlag(!1),H=_slicedToArray(G,2),I=H[0],J=H[1],K=J.on,L=J.off,M=useRef(null),N=useRef(null),O=useSortSteps({step:l,min:f,max:h}),P=l?O:Math.abs((h-f)/100),Q=getIcon(t),R=getIcon(s),S=sizeMap[p],T=useSlider({disabled:n,range:w,value:k,min:f,max:h,step:P,onChange:i,onAfterChange:j,sliderRef:c,buttonRefs:[M,N]}),U=T.onKeyPress,V=T.onFocus,W=T.handlePress,X=T.onSliderClick,Y=T.popoverPosition,Z=T.activeButton,$=T.currentValue,_=useSliderStationing(1===$.length?$[0]:$,f,h,r,w,P,[M,N],c),aa=_.lineSizes,ba=_.buttonPositions,ca={role:"button",tabIndex:0,className:cnSlider("Control"),ref:c,onClick:X},da=function(a){a?K():L()};return React.createElement("div",Object.assign({ref:b,className:cnSlider({size:p},[D]),style:E},F),x&&React.createElement(FieldLabel,{icon:y,className:cnSlider("Label"),size:p},x),React.createElement("div",{className:cnSlider("Container")},("input"===s||R)&&React.createElement("div",{className:cnSlider("Side",{position:"left"})},"input"===s&&React.createElement(SliderInput,{value:getValueForInput(a,0),onChange:getOnChandgeForInput(a,0),size:p,min:f,max:getMaxForStartField(a),status:z,step:P,disabled:n}),R&&React.createElement(R,{size:null!==S&&void 0!==S?S:void 0,view:"secondary"})),React.createElement("div",ca,React.createElement(SliderLine,{hovered:I||"number"==typeof Z,onHover:da,lines:aa,disabled:n,view:r}),$.map(function(a,b){return React.createElement(SliderPoint,{hovered:I||"number"==typeof Z,buttonRef:M,popoverPosition:Y[b],onKeyPress:U,onFocus:V,handlePress:W,disabled:n,position:ba[b],focused:Z===b,buttonLabel:b,withTooltip:u,onHover:da,tooltipFormatter:C,value:a,role:"slider","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":a,tooltipZIndex:"number"==typeof(null===E||void 0===E?void 0:E.zIndex)?E.zIndex+1:void 0,key:cnSlider("Point",{index:b})})})),("input"===t||Q)&&React.createElement("div",{className:cnSlider("Side",{position:"right"})},"input"===t&&React.createElement(SliderInput,{value:getValueForInput(a,1),onChange:getOnChandgeForInput(a,1),size:p,min:getMinForEndField(a),max:h,status:z,step:P,disabled:n}),Q&&React.createElement(Q,{size:S,view:"secondary"}))),A&&React.createElement(FieldCaption,{className:cnSlider("Caption"),status:z},A))};export var Slider=forwardRef(SliderRender);
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["min","max","onChange","onAfterChange","value","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style"];import"./Slider.css";import React,{forwardRef,useRef,useState}from"react";import{usePropsHandler}from"../EventInterceptor/usePropsHandler";import{FieldCaption}from"../FieldCaption";import{FieldLabel}from"../FieldLabel";import{useFlag}from"../../hooks/useFlag";import{useForkRef}from"../../hooks/useForkRef";import{useSortSteps}from"../../hooks/useSortSteps";import{cn}from"../../utils/bem";import{defaultPropSize,defaultTooltipFormatter,getIcon,getMaxForStartField,getMinForEndField,getOnChandgeForInput,getValidStep,getValueForInput,isRangeParams}from"./helper";import{SliderInput}from"./SliderInput/SliderInput";import{SliderLine}from"./SliderLine/SliderLine";import{SliderPoint}from"./SliderPoint/SliderPoint";import{useSlider}from"./useSlider/useSlider";import{useSliderStationing}from"./useSliderStationing";var cnSlider=cn("Slider"),sizeMap={xs:"xs",s:"s",m:"m",l:"m"};export var COMPONENT_NAME="Slider";var SliderRender=function(a,b){var c=useRef(null),d=usePropsHandler(COMPONENT_NAME,a,c),e=d.min,f=void 0===e?0:e,g=d.max,h=void 0===g?100:g,i=d.onChange,j=d.onAfterChange,k=d.value,l=d.step,m=d.disabled,n=void 0!==m&&m,o=d.size,p=void 0===o?defaultPropSize:o,q=d.view,r=void 0===q?"default":q,s=d.leftSide,t=d.rightSide,u=d.withTooltip,v=d.range,w=void 0!==v&&v,x=d.label,y=d.labelIcon,z=d.status,A=d.caption,B=d.tooltipFormatter,C=void 0===B?defaultTooltipFormatter:B,D=d.className,E=d.style,F=_objectWithoutProperties(d,_excluded),G=useState(),H=_slicedToArray(G,2),I=H[0],J=H[1],K=useFlag(!1),L=_slicedToArray(K,2),M=L[0],N=L[1],O=N.on,P=N.off,Q=useRef(null),R=useRef(null),S=useRef(null),T=useSortSteps({step:getValidStep(f,h,l),min:f,max:h}),U=l?T:Math.abs((h-f)/100),V=getIcon(t),W=getIcon(s),X=sizeMap[p],Y=useSlider({disabled:n,range:w,value:k,min:f,max:h,step:U,onChange:i,onAfterChange:j,sliderRef:c,containerRef:Q,buttonRefs:[R,S]}),Z=Y.onKeyPress,$=Y.onFocus,_=Y.handlePress,aa=Y.onSliderClick,ba=Y.popoverPosition,ca=Y.activeButton,da=Y.currentValue,ea=useSliderStationing(1===da.length?da[0]:da,f,h,r,w,U,[R,S],c),fa=ea.lineSizes,ga=ea.buttonPositions,ha={role:"button",tabIndex:0,className:cnSlider("Control"),ref:c,onClick:aa},ia=function(a){a?O():P()};return React.createElement("div",Object.assign({ref:useForkRef([b,Q]),className:cnSlider({size:p},[D]),style:E},F),x&&React.createElement(FieldLabel,{icon:y,className:cnSlider("Label"),size:p},x),React.createElement("div",{className:cnSlider("Container")},("input"===s||W)&&React.createElement("div",{className:cnSlider("Side",{position:"left"})},"input"===s&&React.createElement(SliderInput,{value:getValueForInput(a,0),onFocus:function(){return J(0)},onBlur:function onBlur(){return J(void 0)},onChange:getOnChandgeForInput(a,0),size:p,min:f,inputMode:"numeric",max:getMaxForStartField(a),status:z,step:U,disabled:n}),W&&React.createElement(W,{size:null!==X&&void 0!==X?X:void 0,view:"secondary"})),React.createElement("div",ha,React.createElement(SliderLine,{hovered:M||"number"==typeof ca,onHover:ia,lines:fa,disabled:n,view:r}),da.map(function(a,b){var c=1<da.length&&da[0]===da[1]&&a===h&&0===b;return React.createElement(SliderPoint,{hovered:M||"number"==typeof ca,buttonRef:R,popoverPosition:ba[b],onKeyPress:Z,onFocus:$,handlePress:_,disabled:n,active:c,position:ga[b],focused:ca===b||I===b,buttonLabel:b,withTooltip:u,onHover:ia,tooltipFormatter:C,value:a,role:"slider","aria-valuemin":f,"aria-valuemax":h,"aria-valuenow":a,tooltipZIndex:"number"==typeof(null===E||void 0===E?void 0:E.zIndex)?E.zIndex+1:void 0,key:cnSlider("Point",{index:b})})})),("input"===t||V)&&React.createElement("div",{className:cnSlider("Side",{position:"right"})},"input"===t&&React.createElement(SliderInput,{value:getValueForInput(a,1),onChange:getOnChandgeForInput(a,1),onBlur:function onBlur(){return J(void 0)},size:p,min:getMinForEndField(a),max:h,onFocus:function(){return J(isRangeParams(a)?1:0)},inputMode:"numeric",status:z,step:U,disabled:n}),V&&React.createElement(V,{size:X,view:"secondary"}))),A&&React.createElement(FieldCaption,{className:cnSlider("Caption"),status:z},A))};export var Slider=forwardRef(SliderRender);
2
2
  //# sourceMappingURL=Slider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","usePropsHandler","FieldCaption","FieldLabel","useFlag","useSortSteps","cn","defaultPropSize","defaultTooltipFormatter","getIcon","getMaxForStartField","getMinForEndField","getOnChandgeForInput","getValueForInput","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style","otherProps","isHovered","on","off","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","map","val","index","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '##/components/FieldCaption';\nimport { FieldLabel } from '##/components/FieldLabel';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useSortSteps } from '##/hooks/useSortSteps';\nimport { cn } from '##/utils/bem';\n\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n getIcon,\n getMaxForStartField,\n getMinForEndField,\n getOnChandgeForInput,\n getValueForInput,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n labelIcon,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [isHovered, { on, off }] = useFlag(false);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n const sortedSteps = useSortSteps({ step: stepProp, min, max });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n const IconRight = getIcon(rightSide);\n const IconLeft = getIcon(leftSide);\n const iconSize = sizeMap[size];\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={ref}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel icon={labelIcon} className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {(leftSide === 'input' || IconLeft) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n {leftSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 0)}\n onChange={getOnChandgeForInput(props, 0)}\n size={size}\n min={min}\n max={getMaxForStartField(props)}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconLeft && (\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n )}\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered || typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => (\n <SliderPoint\n hovered={isHovered || typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n position={buttonPositions[index]}\n focused={activeButton === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number' ? style.zIndex + 1 : undefined\n }\n key={cnSlider('Point', { index })}\n />\n ))}\n </div>\n {(rightSide === 'input' || IconRight) && (\n <div className={cnSlider('Side', { position: 'right' })}>\n {rightSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 1)}\n onChange={getOnChandgeForInput(props, 1)}\n size={size}\n min={getMinForEndField(props)}\n max={max}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconRight && <IconRight size={iconSize} view=\"secondary\" />}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}
1
+ {"version":3,"file":"Slider.js","names":["React","forwardRef","useRef","useState","usePropsHandler","FieldCaption","FieldLabel","useFlag","useForkRef","useSortSteps","cn","defaultPropSize","defaultTooltipFormatter","getIcon","getMaxForStartField","getMinForEndField","getOnChandgeForInput","getValidStep","getValueForInput","isRangeParams","SliderInput","SliderLine","SliderPoint","useSlider","useSliderStationing","cnSlider","sizeMap","xs","s","m","l","COMPONENT_NAME","SliderRender","props","ref","sliderRef","min","max","onChange","onAfterChange","value","stepProp","step","disabled","size","view","leftSide","rightSide","withTooltip","range","label","labelIcon","status","caption","tooltipFormatter","className","style","otherProps","focusIndex","setFocusIndex","isHovered","on","off","containerRef","leftButtonRef","rightButtonRef","sortedSteps","Math","abs","IconRight","IconLeft","iconSize","buttonRefs","onKeyPress","onFocus","handlePress","onSliderClick","popoverPosition","activeButton","currentValue","length","lineSizes","buttonPositions","containerProps","role","tabIndex","onClick","changeHovered","position","map","val","index","topLayer","zIndex","Slider"],"sources":["../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import './Slider.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport React, { forwardRef, useRef, useState } from 'react';\n\nimport { usePropsHandler } from '##/components/EventInterceptor/usePropsHandler';\nimport { FieldCaption } from '##/components/FieldCaption';\nimport { FieldLabel } from '##/components/FieldLabel';\nimport { useFlag } from '##/hooks/useFlag';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { useSortSteps } from '##/hooks/useSortSteps';\nimport { cn } from '##/utils/bem';\n\nimport {\n defaultPropSize,\n defaultTooltipFormatter,\n getIcon,\n getMaxForStartField,\n getMinForEndField,\n getOnChandgeForInput,\n getValidStep,\n getValueForInput,\n isRangeParams,\n PropSize,\n SliderComponent,\n SliderProps,\n} from './helper';\nimport { SliderInput } from './SliderInput/SliderInput';\nimport { SliderLine } from './SliderLine/SliderLine';\nimport { SliderPoint } from './SliderPoint/SliderPoint';\nimport { ActiveButton } from './useSlider/helper';\nimport { useSlider } from './useSlider/useSlider';\nimport { useSliderStationing } from './useSliderStationing';\n\nconst cnSlider = cn('Slider');\n\nconst sizeMap: Record<PropSize, IconPropSize> = {\n xs: 'xs',\n s: 's',\n m: 'm',\n l: 'm',\n};\n\nexport const COMPONENT_NAME = 'Slider' as const;\n\nconst SliderRender = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n ref: React.Ref<HTMLDivElement>,\n) => {\n const sliderRef = useRef<HTMLDivElement>(null);\n\n const {\n min = 0,\n max = 100,\n onChange,\n onAfterChange,\n value,\n step: stepProp,\n disabled = false,\n size = defaultPropSize,\n view = 'default',\n leftSide,\n rightSide,\n withTooltip,\n range = false,\n label,\n labelIcon,\n status,\n caption,\n tooltipFormatter = defaultTooltipFormatter,\n className,\n style,\n ...otherProps\n } = usePropsHandler(COMPONENT_NAME, props, sliderRef);\n\n const [focusIndex, setFocusIndex] = useState<number | undefined>();\n const [isHovered, { on, off }] = useFlag(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const leftButtonRef = useRef<HTMLButtonElement>(null);\n const rightButtonRef = useRef<HTMLButtonElement>(null);\n const sortedSteps = useSortSteps({\n step: getValidStep(min, max, stepProp),\n min,\n max,\n });\n const step = stepProp ? sortedSteps : Math.abs((max - min) / 100);\n const IconRight = getIcon(rightSide);\n const IconLeft = getIcon(leftSide);\n const iconSize = sizeMap[size];\n\n const {\n onKeyPress,\n onFocus,\n handlePress,\n onSliderClick,\n popoverPosition,\n activeButton,\n currentValue,\n } = useSlider({\n disabled,\n range,\n value,\n min,\n max,\n step,\n onChange,\n onAfterChange,\n sliderRef,\n containerRef,\n buttonRefs: [leftButtonRef, rightButtonRef],\n });\n\n const { lineSizes, buttonPositions } = useSliderStationing(\n currentValue.length === 1 ? currentValue[0] : currentValue,\n min,\n max,\n view,\n range,\n step,\n [leftButtonRef, rightButtonRef],\n sliderRef,\n );\n\n const containerProps = {\n role: 'button',\n tabIndex: 0,\n className: cnSlider('Control'),\n ref: sliderRef,\n onClick: onSliderClick,\n };\n\n const changeHovered = (status: boolean) => {\n if (status) on();\n else off();\n };\n\n return (\n <div\n ref={useForkRef([ref, containerRef])}\n className={cnSlider({ size }, [className])}\n style={style}\n {...otherProps}\n >\n {label && (\n <FieldLabel icon={labelIcon} className={cnSlider('Label')} size={size}>\n {label}\n </FieldLabel>\n )}\n <div className={cnSlider('Container')}>\n {(leftSide === 'input' || IconLeft) && (\n <div className={cnSlider('Side', { position: 'left' })}>\n {leftSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 0)}\n onFocus={() => setFocusIndex(0)}\n onBlur={() => setFocusIndex(undefined)}\n onChange={getOnChandgeForInput(props, 0)}\n size={size}\n min={min}\n inputMode=\"numeric\"\n max={getMaxForStartField(props)}\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconLeft && (\n <IconLeft size={iconSize ?? undefined} view=\"secondary\" />\n )}\n </div>\n )}\n <div {...containerProps}>\n <SliderLine\n hovered={isHovered || typeof activeButton === 'number'}\n onHover={changeHovered}\n lines={lineSizes}\n disabled={disabled}\n view={view}\n />\n {currentValue.map((val, index) => {\n // let isActive = true;\n // if (\n // currentValue.length > 1 &&\n // currentValue[0] === currentValue[1]\n // ) {\n // if (index === 0 && val === min) {\n // isActive = false;\n // }\n // if (index === 1 && val === max) {\n // isActive = false;\n // }\n // }\n const topLayer =\n currentValue.length > 1 &&\n currentValue[0] === currentValue[1] &&\n val === max &&\n index === 0;\n return (\n <SliderPoint\n hovered={isHovered || typeof activeButton === 'number'}\n buttonRef={leftButtonRef}\n popoverPosition={popoverPosition[index]}\n onKeyPress={onKeyPress}\n onFocus={onFocus}\n handlePress={handlePress}\n disabled={disabled}\n active={topLayer}\n position={buttonPositions[index]}\n focused={activeButton === index || focusIndex === index}\n buttonLabel={index as ActiveButton}\n withTooltip={withTooltip}\n onHover={changeHovered}\n tooltipFormatter={tooltipFormatter}\n value={val}\n role=\"slider\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={val}\n tooltipZIndex={\n typeof style?.zIndex === 'number'\n ? style.zIndex + 1\n : undefined\n }\n key={cnSlider('Point', { index })}\n />\n );\n })}\n </div>\n {(rightSide === 'input' || IconRight) && (\n <div className={cnSlider('Side', { position: 'right' })}>\n {rightSide === 'input' && (\n <SliderInput\n value={getValueForInput(props, 1)}\n onChange={getOnChandgeForInput(props, 1)}\n onBlur={() => setFocusIndex(undefined)}\n size={size}\n min={getMinForEndField(props)}\n max={max}\n onFocus={() => setFocusIndex(isRangeParams(props) ? 1 : 0)}\n inputMode=\"numeric\"\n status={status}\n step={step}\n disabled={disabled}\n />\n )}\n {IconRight && <IconRight size={iconSize} view=\"secondary\" />}\n </div>\n )}\n </div>\n {caption && (\n <FieldCaption className={cnSlider('Caption')} status={status}>\n {caption}\n </FieldCaption>\n )}\n </div>\n );\n};\n\nexport const Slider = forwardRef(SliderRender) as SliderComponent;\n"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ .SliderInput{width:var(--slider-input-width)}.SliderInput .TextField-Input{min-width:auto}.SliderInput_size_l,.SliderInput_size_m{--slider-input-width:118px}.SliderInput_size_s{--slider-input-width:106px}.SliderInput_size_xs{--slider-input-width:88px}
@@ -1,3 +1,4 @@
1
+ import './SliderInput.css';
1
2
  import React from 'react';
2
3
  import { TextFieldProps } from '../../TextField/TextField';
3
4
  declare type Props = Omit<TextFieldProps<'number'>, 'value' | 'onChange' | 'min' | 'max' | 'step'> & {
@@ -1,2 +1,2 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","onChange","min","max","step"];import React,{useEffect,useState}from"react";import{TextField}from"../../TextField/TextField";import{getValidValue,isValidValue}from"../useSlider/helper";export var SliderInput=function(a){var b=a.value,c=a.onChange,d=a.min,f=void 0===d?0:d,g=a.max,h=void 0===g?100:g,i=a.step,j=void 0===i?1:i,k=_objectWithoutProperties(a,_excluded),l=useState((null===b||void 0===b?void 0:b.toString())||null),m=_slicedToArray(l,2),n=m[0],o=m[1];return useEffect(function(){return o((null===b||void 0===b?void 0:b.toString())||null)},[b]),React.createElement(TextField,Object.assign({onBlur:function commitChange(){var a=getValidValue(+n,f,h,j);null===c||void 0===c?void 0:c({value:a}),o(a.toString())},type:"number",min:f,max:h,step:j,onChange:function handleChange(a){var b=a.e,d=a.value;o(d),isValidValue(+d,f,h,j)&&(null===c||void 0===c?void 0:c({value:+d,e:b}))},value:n},k))};
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["value","onChange","min","max","step","size","className"];import"./SliderInput.css";import React,{useEffect,useState}from"react";import{cn}from"../../../utils/bem";import{TextField}from"../../TextField/TextField";import{getValidValue,isValidValue}from"../useSlider/helper";var cnSliderInput=cn("SliderInput");export var SliderInput=function(a){var b=a.value,c=a.onChange,d=a.min,f=void 0===d?0:d,g=a.max,h=void 0===g?100:g,i=a.step,j=void 0===i?1:i,k=a.size,l=void 0===k?"m":k,m=a.className,n=_objectWithoutProperties(a,_excluded),o=useState((null===b||void 0===b?void 0:b.toString())||null),p=_slicedToArray(o,2),q=p[0],r=p[1];return useEffect(function(){return r((null===b||void 0===b?void 0:b.toString())||null)},[b]),React.createElement(TextField,Object.assign({onBlur:function commitChange(){var a=getValidValue(+q,f,h,j);null===c||void 0===c?void 0:c({value:a}),r(a.toString())},type:"number",min:f,max:h,step:j,size:l,className:cnSliderInput({size:l},[m]),onChange:function handleChange(a){var b=a.e,d=a.value;r(d),isValidValue(+d,f,h,j)&&(null===c||void 0===c?void 0:c({value:+d,e:b}))},value:q},n))};
2
2
  //# sourceMappingURL=SliderInput.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderInput.js","names":["React","useEffect","useState","TextField","getValidValue","isValidValue","SliderInput","props","value","onChange","min","max","step","otherProps","toString","currentValue","setCurrentValue","commitChange","validatedValue","handleChange","e"],"sources":["../../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport {\n TextField,\n TextFieldOnChangeArguments,\n TextFieldProps,\n} from '../../TextField/TextField';\nimport { getValidValue, isValidValue } from '../useSlider/helper';\n\ntype Props = Omit<\n TextFieldProps<'number'>,\n 'value' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n value?: number;\n step?: number | number[];\n min?: number;\n max?: number;\n onChange?: (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n }) => void;\n};\n\nexport const SliderInput = (props: Props) => {\n const {\n value,\n onChange,\n min = 0,\n max = 100,\n step = 1,\n ...otherProps\n } = props;\n\n const [currentValue, setCurrentValue] = useState<string | null>(\n value?.toString() || null,\n );\n\n const handleChange = ({ e, value }: TextFieldOnChangeArguments) => {\n setCurrentValue(value);\n if (isValidValue(Number(value), min, max, step)) {\n onChange?.({ value: Number(value), e });\n }\n };\n\n const commitChange = () => {\n const validatedValue = getValidValue(Number(currentValue), min, max, step);\n onChange?.({ value: validatedValue });\n setCurrentValue(validatedValue.toString());\n };\n\n useEffect(() => setCurrentValue(value?.toString() || null), [value]);\n\n return (\n <TextField\n onBlur={commitChange}\n type=\"number\"\n min={min}\n max={max}\n step={step}\n onChange={handleChange}\n value={currentValue}\n {...otherProps}\n />\n );\n};\n"],"mappings":"4MAAA,MAAOA,MAAP,EAAgBC,SAAhB,CAA2BC,QAA3B,KAA2C,OAA3C,CAEA,OACEC,SADF,iCAKA,OAASC,aAAT,CAAwBC,YAAxB,2BAgBA,MAAO,IAAMC,YAAW,CAAG,SAACC,CAAD,CAAkB,IAEzCC,EAFyC,CAQvCD,CARuC,CAEzCC,KAFyC,CAGzCC,CAHyC,CAQvCF,CARuC,CAGzCE,QAHyC,GAQvCF,CARuC,CAIzCG,GAJyC,CAIzCA,CAJyC,YAInC,CAJmC,KAQvCH,CARuC,CAKzCI,GALyC,CAKzCA,CALyC,YAKnC,GALmC,KAQvCJ,CARuC,CAMzCK,IANyC,CAMzCA,CANyC,YAMlC,CANkC,GAOtCC,CAPsC,0BAQvCN,CARuC,cAUHL,QAAQ,CAC9C,QAAAM,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEM,QAAP,KAAqB,IADyB,CAVL,uBAUpCC,CAVoC,MAUtBC,CAVsB,MA6B3C,MAFAf,UAAS,CAAC,iBAAMe,EAAe,CAAC,QAAAR,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEM,QAAP,KAAqB,IAAtB,CAArB,CAAD,CAAmD,CAACN,CAAD,CAAnD,CAET,CACE,oBAAC,SAAD,gBACE,MAAM,CAVW,QAAfS,aAAe,EAAM,CACzB,GAAMC,EAAc,CAAGd,aAAa,EAAQW,CAAR,CAAuBL,CAAvB,CAA4BC,CAA5B,CAAiCC,CAAjC,CAApC,CADyB,OAEzBH,CAFyB,WAEzBA,CAFyB,QAEzBA,CAAQ,CAAG,CAAED,KAAK,CAAEU,CAAT,CAAH,CAFiB,CAGzBF,CAAe,CAACE,CAAc,CAACJ,QAAf,EAAD,CAChB,CAKC,CAEE,IAAI,CAAC,QAFP,CAGE,GAAG,CAAEJ,CAHP,CAIE,GAAG,CAAEC,CAJP,CAKE,IAAI,CAAEC,CALR,CAME,QAAQ,CAtBS,QAAfO,aAAe,GAA8C,IAA3CC,EAA2C,GAA3CA,CAA2C,CAAxCZ,CAAwC,GAAxCA,KAAwC,CACjEQ,CAAe,CAACR,CAAD,CADkD,CAE7DH,YAAY,EAAQG,CAAR,CAAgBE,CAAhB,CAAqBC,CAArB,CAA0BC,CAA1B,CAFiD,UAG/DH,CAH+D,WAG/DA,CAH+D,QAG/DA,CAAQ,CAAG,CAAED,KAAK,EAASA,CAAhB,CAAwBY,CAAC,CAADA,CAAxB,CAAH,CAHuD,CAKlE,CAWC,CAOE,KAAK,CAAEL,CAPT,EAQMF,CARN,EAWH,CAzCM"}
1
+ {"version":3,"file":"SliderInput.js","names":["React","useEffect","useState","cn","TextField","getValidValue","isValidValue","cnSliderInput","SliderInput","props","value","onChange","min","max","step","size","className","otherProps","toString","currentValue","setCurrentValue","commitChange","validatedValue","handleChange","e"],"sources":["../../../../../../src/components/Slider/SliderInput/SliderInput.tsx"],"sourcesContent":["import './SliderInput.css';\n\nimport React, { useEffect, useState } from 'react';\n\nimport { cn } from '##/utils/bem';\n\nimport {\n TextField,\n TextFieldOnChangeArguments,\n TextFieldProps,\n} from '../../TextField/TextField';\nimport { getValidValue, isValidValue } from '../useSlider/helper';\n\ntype Props = Omit<\n TextFieldProps<'number'>,\n 'value' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n value?: number;\n step?: number | number[];\n min?: number;\n max?: number;\n onChange?: (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n }) => void;\n};\n\nconst cnSliderInput = cn('SliderInput');\n\nexport const SliderInput = (props: Props) => {\n const {\n value,\n onChange,\n min = 0,\n max = 100,\n step = 1,\n size = 'm',\n className,\n ...otherProps\n } = props;\n\n const [currentValue, setCurrentValue] = useState<string | null>(\n value?.toString() || null,\n );\n\n const handleChange = ({ e, value }: TextFieldOnChangeArguments) => {\n setCurrentValue(value);\n if (isValidValue(Number(value), min, max, step)) {\n onChange?.({ value: Number(value), e });\n }\n };\n\n const commitChange = () => {\n const validatedValue = getValidValue(Number(currentValue), min, max, step);\n onChange?.({ value: validatedValue });\n setCurrentValue(validatedValue.toString());\n };\n\n useEffect(() => setCurrentValue(value?.toString() || null), [value]);\n\n return (\n <TextField\n onBlur={commitChange}\n type=\"number\"\n min={min}\n max={max}\n step={step}\n size={size}\n className={cnSliderInput({ size }, [className])}\n onChange={handleChange}\n value={currentValue}\n {...otherProps}\n />\n );\n};\n"],"mappings":"+NAAA,0BAEA,MAAOA,MAAP,EAAgBC,SAAhB,CAA2BC,QAA3B,KAA2C,OAA3C,CAEA,OAASC,EAAT,0BAEA,OACEC,SADF,iCAKA,OAASC,aAAT,CAAwBC,YAAxB,2BAgBA,GAAMC,cAAa,CAAGJ,EAAE,CAAC,aAAD,CAAxB,CAEA,MAAO,IAAMK,YAAW,CAAG,SAACC,CAAD,CAAkB,IAEzCC,EAFyC,CAUvCD,CAVuC,CAEzCC,KAFyC,CAGzCC,CAHyC,CAUvCF,CAVuC,CAGzCE,QAHyC,GAUvCF,CAVuC,CAIzCG,GAJyC,CAIzCA,CAJyC,YAInC,CAJmC,KAUvCH,CAVuC,CAKzCI,GALyC,CAKzCA,CALyC,YAKnC,GALmC,KAUvCJ,CAVuC,CAMzCK,IANyC,CAMzCA,CANyC,YAMlC,CANkC,KAUvCL,CAVuC,CAOzCM,IAPyC,CAOzCA,CAPyC,YAOlC,GAPkC,GAQzCC,CARyC,CAUvCP,CAVuC,CAQzCO,SARyC,CAStCC,CATsC,0BAUvCR,CAVuC,cAYHP,QAAQ,CAC9C,QAAAQ,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEQ,QAAP,KAAqB,IADyB,CAZL,uBAYpCC,CAZoC,MAYtBC,CAZsB,MA+B3C,MAFAnB,UAAS,CAAC,iBAAMmB,EAAe,CAAC,QAAAV,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEQ,QAAP,KAAqB,IAAtB,CAArB,CAAD,CAAmD,CAACR,CAAD,CAAnD,CAET,CACE,oBAAC,SAAD,gBACE,MAAM,CAVW,QAAfW,aAAe,EAAM,CACzB,GAAMC,EAAc,CAAGjB,aAAa,EAAQc,CAAR,CAAuBP,CAAvB,CAA4BC,CAA5B,CAAiCC,CAAjC,CAApC,CADyB,OAEzBH,CAFyB,WAEzBA,CAFyB,QAEzBA,CAAQ,CAAG,CAAED,KAAK,CAAEY,CAAT,CAAH,CAFiB,CAGzBF,CAAe,CAACE,CAAc,CAACJ,QAAf,EAAD,CAChB,CAKC,CAEE,IAAI,CAAC,QAFP,CAGE,GAAG,CAAEN,CAHP,CAIE,GAAG,CAAEC,CAJP,CAKE,IAAI,CAAEC,CALR,CAME,IAAI,CAAEC,CANR,CAOE,SAAS,CAAER,aAAa,CAAC,CAAEQ,IAAI,CAAJA,CAAF,CAAD,CAAW,CAACC,CAAD,CAAX,CAP1B,CAQE,QAAQ,CAxBS,QAAfO,aAAe,GAA8C,IAA3CC,EAA2C,GAA3CA,CAA2C,CAAxCd,CAAwC,GAAxCA,KAAwC,CACjEU,CAAe,CAACV,CAAD,CADkD,CAE7DJ,YAAY,EAAQI,CAAR,CAAgBE,CAAhB,CAAqBC,CAArB,CAA0BC,CAA1B,CAFiD,UAG/DH,CAH+D,WAG/DA,CAH+D,QAG/DA,CAAQ,CAAG,CAAED,KAAK,EAASA,CAAhB,CAAwBc,CAAC,CAADA,CAAxB,CAAH,CAHuD,CAKlE,CAWC,CASE,KAAK,CAAEL,CATT,EAUMF,CAVN,EAaH,CA7CM"}
@@ -1 +1 @@
1
- .SliderLine{--slider-line-radius:0;align-items:center;border-radius:var(--control-radius);display:flex;overflow:hidden;width:100%}.SliderLine_view_division{--slider-line-radius:var(--control-radius);gap:var(--space-2xs)}.SliderLine-Line{--slider-line-color:var(--color-control-bg-ghost);background-color:var(--slider-line-color);border-radius:var(--slider-line-radius);height:var(--space-2xs);transition:background-color .3s;width:var(--slider-line-size)}.SliderLine-Line_active{--slider-line-color:var(--color-control-bg-primary)}.SliderLine-Line_hovered.SliderLine-Line_active{--slider-line-color:var(--color-control-bg-primary-hover)}.SliderLine-Line_disabled{--slider-line-color:var(--color-control-bg-disable)}
1
+ .SliderLine{--slider-line-radius:0;align-items:center;border-radius:var(--control-radius);display:flex;overflow:hidden;width:100%}.SliderLine_view_division{--slider-line-radius:var(--control-radius);gap:var(--space-2xs)}.SliderLine-Line{--slider-line-color:var(--color-control-bg-ghost);background-color:var(--slider-line-color);border-radius:var(--slider-line-radius);height:var(--space-2xs);transition:background-color .3s;width:var(--slider-line-size)}.SliderLine-Line_active{--slider-line-color:var(--color-control-bg-primary)}.SliderLine-Line_active.SliderLine-Line_disabled{--slider-line-color:var(--color-bg-border)}.SliderLine-Line_hovered.SliderLine-Line_active{--slider-line-color:var(--color-control-bg-primary-hover)}.SliderLine-Line_disabled{--slider-line-color:var(--color-control-bg-disable)}
@@ -1 +1 @@
1
- .SliderPoint{align-items:center;background-color:var(--color-bg-default);border:var(--space-3xs) solid var(--color-control-bg-primary);border-radius:calc(var(--space-m)*.5);cursor:pointer;display:flex;height:var(--space-m);justify-content:center;left:var(--slider-button-left);padding:0;position:absolute;top:0;transition:border-color .3s;width:var(--space-m);z-index:1}.SliderPoint_hovered{border-color:var(--color-control-bg-primary-hover)}.SliderPoint_disabled{border-color:var(--color-control-bg-ghost);cursor:auto}.SliderPoint-Tooltip{pointer-events:none}
1
+ .SliderPoint{align-items:center;background-color:var(--color-bg-default);border:var(--space-3xs) solid var(--color-control-bg-primary);border-radius:calc(var(--space-m)*.5);cursor:pointer;display:flex;height:var(--space-m);justify-content:center;left:var(--slider-button-left);padding:0;position:absolute;top:0;transition:border-color .3s;width:var(--space-m);z-index:0}.SliderPoint_hovered{border-color:var(--color-control-bg-primary-hover)}.SliderPoint_disabled{border-color:var(--color-control-bg-ghost);cursor:auto}.SliderPoint:focus,.SliderPoint:hover,.SliderPoint_active{z-index:1}.SliderPoint-Tooltip{pointer-events:none}
@@ -1,2 +1,2 @@
1
- import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["hovered","onHover","value","position","disabled","withTooltip","focused","popoverPosition","buttonRef","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SliderPoint.css";import React,{useEffect,useRef}from"react";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{generateThemeClassNames,ThemeContext,useTheme}from"../../Theme/Theme";import{Tooltip}from"../../Tooltip/Tooltip";var cnSliderPoint=cn("SliderPoint"),getTooltipPosition=function(a,b){if(a&&b&&b.current){var c=b.current.getBoundingClientRect(),d=c.y,e=c.height;return{x:Math.round(a.x),y:Math.round(d-e+22)}}return{x:0,y:0}};export var SliderPoint=function(a){var b=a.hovered,c=a.onHover,d=a.value,e=a.position,f=a.disabled,g=a.withTooltip,h=a.focused,i=a.popoverPosition,j=a.buttonRef,k=a.handlePress,l=a.onKeyPress,m=a.tooltipFormatter,n=a.buttonLabel,o=a.onFocus,p=a.tooltipZIndex,q=_objectWithoutProperties(a,_excluded),r=useFlag(!1),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useTheme(),w=v.theme,x=_objectSpread(_objectSpread({},w),{},{color:{primary:w.color.invert,accent:w.color.accent,invert:w.color.primary}}),y=generateThemeClassNames(x),z=function(a){f||(null===o||void 0===o?void 0:o(a,n),u.on())},A=function(a){f||(null===c||void 0===c?void 0:c(a),a&&u.on(),a&&u.on(),!a&&!h&&u.off())},B=useRef(null),C=getTooltipPosition(i,j||B);return useEffect(function(){h?u.on():u.off()},[h]),React.createElement(React.Fragment,null,React.createElement("button",Object.assign({type:"button","aria-label":"".concat(n,"-button"),className:cnSliderPoint({hovered:b,disabled:f},[f?"":cnMixFocus()]),onMouseOver:function onMouseOver(){return A(!0)},onMouseOut:function onMouseOut(){return A(!1)},onMouseDown:function onMouseDown(){return null===k||void 0===k?void 0:k(n)},onTouchStart:function onTouchStart(){return null===k||void 0===k?void 0:k(n)},onKeyDown:function onKeyDown(a){return null===l||void 0===l?void 0:l(a,n)},onFocus:z,onBlur:function handleBlur(a){f||(null===o||void 0===o?void 0:o(a,null),u.off())},onClick:z,ref:useForkRef([j,B]),tabIndex:0,style:_defineProperty({},"--slider-button-left","".concat(e,"%"))},q)),t&&g&&i&&React.createElement(ThemeContext.Provider,{value:{theme:x,themeClassNames:y}},React.createElement(Tooltip,{position:C,className:cnSliderPoint("Tooltip"),direction:"downCenter",possibleDirections:["downCenter","leftDown","rightDown","upCenter"],style:{zIndex:p},offset:8},m?m(d):d)))};
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["hovered","onHover","value","position","disabled","withTooltip","focused","popoverPosition","buttonRef","active","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex"];function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import"./SliderPoint.css";import React,{useEffect,useRef}from"react";import{useFlag}from"../../../hooks/useFlag/useFlag";import{useForkRef}from"../../../hooks/useForkRef/useForkRef";import{cnMixFocus}from"../../../mixs/MixFocus/MixFocus";import{cn}from"../../../utils/bem";import{generateThemeClassNames,ThemeContext,useTheme}from"../../Theme/Theme";import{Tooltip}from"../../Tooltip/Tooltip";var cnSliderPoint=cn("SliderPoint"),getTooltipPosition=function(a,b){if(a&&b&&b.current){var c=b.current.getBoundingClientRect(),d=c.y,e=c.height;return{x:Math.round(a.x),y:Math.round(d+e/2)}}return{x:0,y:0}};export var SliderPoint=function(a){var b=a.hovered,c=a.onHover,d=a.value,e=a.position,f=a.disabled,g=a.withTooltip,h=a.focused,i=a.popoverPosition,j=a.buttonRef,k=a.active,l=a.handlePress,m=a.onKeyPress,n=a.tooltipFormatter,o=a.buttonLabel,p=a.onFocus,q=a.tooltipZIndex,r=_objectWithoutProperties(a,_excluded),s=useFlag(!1),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useTheme(),x=w.theme,y=_objectSpread(_objectSpread({},x),{},{color:{primary:x.color.invert,accent:x.color.accent,invert:x.color.primary}}),z=generateThemeClassNames(y),A=function(a){f||(null===p||void 0===p?void 0:p(a,o),v.on())},B=function(a){f||(null===c||void 0===c?void 0:c(a),a&&v.on(),a&&v.on(),!a&&!h&&v.off())},C=useRef(null),D=getTooltipPosition(i,j||C);return useEffect(function(){h?v.on():v.off()},[h]),React.createElement(React.Fragment,null,React.createElement("button",Object.assign({type:"button","aria-label":"".concat(o,"-button"),className:cnSliderPoint({hovered:b,disabled:f,active:k},[f?"":cnMixFocus()]),onMouseOver:function onMouseOver(){return B(!0)},onMouseOut:function onMouseOut(){return B(!1)},onMouseDown:function onMouseDown(){return null===l||void 0===l?void 0:l(o)},onTouchStart:function onTouchStart(){return null===l||void 0===l?void 0:l(o)},onKeyDown:function onKeyDown(a){return null===m||void 0===m?void 0:m(a,o)},onFocus:A,onBlur:function handleBlur(a){f||(null===p||void 0===p?void 0:p(a,null),v.off())},onClick:A,ref:useForkRef([j,C]),tabIndex:0,style:_defineProperty({},"--slider-button-left","".concat(e,"%"))},r)),u&&g&&i&&React.createElement(ThemeContext.Provider,{value:{theme:y,themeClassNames:z}},React.createElement(Tooltip,{position:D,className:cnSliderPoint("Tooltip"),direction:"downCenter",possibleDirections:["leftCenter","rightCenter","downCenter","leftDown","rightDown","upCenter"],style:{zIndex:q},offset:10},n?n(d):d)))};
2
2
  //# sourceMappingURL=SliderPoint.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderPoint.js","names":["React","useEffect","useRef","useFlag","useForkRef","cnMixFocus","cn","generateThemeClassNames","ThemeContext","useTheme","Tooltip","cnSliderPoint","getTooltipPosition","popoverPosition","buttonRef","current","getBoundingClientRect","y","height","x","Math","round","SliderPoint","props","hovered","onHover","value","position","disabled","withTooltip","focused","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex","otherProps","tooltipVisible","setTooltipVisible","theme","tooltipTheme","color","primary","invert","accent","tooltipThemeClassNames","handleFocus","e","on","handleMouseAction","enter","off","pointRef","tooltipPosition","handleBlur","themeClassNames","zIndex"],"sources":["../../../../../../src/components/Slider/SliderPoint/SliderPoint.tsx"],"sourcesContent":["import './SliderPoint.css';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport {\n generateThemeClassNames,\n ThemeContext,\n useTheme,\n} from '../../Theme/Theme';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { SliderPointProps, TrackPosition } from '../helper';\n\nconst cnSliderPoint = cn('SliderPoint');\n\nconst getTooltipPosition = (\n popoverPosition?: TrackPosition,\n buttonRef?: React.RefObject<HTMLButtonElement>,\n) => {\n if (popoverPosition && buttonRef && buttonRef.current) {\n const { y, height } = buttonRef.current.getBoundingClientRect();\n return {\n x: Math.round(popoverPosition.x),\n y: Math.round(y - height + 22),\n };\n }\n\n return { x: 0, y: 0 };\n};\nexport const SliderPoint = (props: SliderPointProps) => {\n const {\n hovered,\n onHover,\n value,\n position,\n disabled,\n withTooltip,\n focused,\n popoverPosition,\n buttonRef,\n handlePress,\n onKeyPress,\n tooltipFormatter,\n buttonLabel,\n onFocus,\n tooltipZIndex,\n ...otherProps\n } = props;\n\n const [tooltipVisible, setTooltipVisible] = useFlag(false);\n\n const { theme } = useTheme();\n\n const tooltipTheme = {\n ...theme,\n color: {\n primary: theme.color.invert,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n };\n\n const tooltipThemeClassNames = generateThemeClassNames(tooltipTheme);\n\n const handleFocus = (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n ) => {\n if (!disabled) {\n onFocus?.(e, buttonLabel);\n setTooltipVisible.on();\n }\n };\n\n const handleMouseAction = (enter: boolean) => {\n if (!disabled) {\n onHover?.(enter);\n enter && setTooltipVisible.on();\n if (enter) setTooltipVisible.on();\n if (!enter && !focused) setTooltipVisible.off();\n }\n };\n\n const handleBlur = (\n e:\n | React.FocusEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLButtonElement>,\n ) => {\n if (!disabled) {\n onFocus?.(e, null);\n setTooltipVisible.off();\n }\n };\n\n const pointRef = useRef<HTMLButtonElement>(null);\n\n const tooltipPosition = getTooltipPosition(\n popoverPosition,\n buttonRef || pointRef,\n );\n\n useEffect(() => {\n focused ? setTooltipVisible.on() : setTooltipVisible.off();\n }, [focused]);\n\n return (\n <>\n <button\n type=\"button\"\n aria-label={`${buttonLabel}-button`}\n className={cnSliderPoint({ hovered, disabled }, [\n !disabled ? cnMixFocus() : '',\n ])}\n onMouseOver={() => handleMouseAction(true)}\n onMouseOut={() => handleMouseAction(false)}\n onMouseDown={() => handlePress?.(buttonLabel)}\n onTouchStart={() => handlePress?.(buttonLabel)}\n onKeyDown={(e) => onKeyPress?.(e, buttonLabel)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onClick={handleFocus}\n ref={useForkRef([buttonRef, pointRef])}\n tabIndex={0}\n style={{\n ['--slider-button-left' as string]: `${position}%`,\n }}\n {...otherProps}\n />\n {tooltipVisible && withTooltip && popoverPosition && (\n <ThemeContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n theme: tooltipTheme,\n themeClassNames: tooltipThemeClassNames,\n }}\n >\n <Tooltip\n position={tooltipPosition}\n className={cnSliderPoint('Tooltip')}\n direction=\"downCenter\"\n possibleDirections={[\n 'downCenter',\n 'leftDown',\n 'rightDown',\n 'upCenter',\n ]}\n style={{ zIndex: tooltipZIndex }}\n offset={8}\n >\n {tooltipFormatter ? tooltipFormatter(value) : value}\n </Tooltip>\n </ThemeContext.Provider>\n )}\n </>\n );\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"SliderPoint.js","names":["React","useEffect","useRef","useFlag","useForkRef","cnMixFocus","cn","generateThemeClassNames","ThemeContext","useTheme","Tooltip","cnSliderPoint","getTooltipPosition","popoverPosition","buttonRef","current","getBoundingClientRect","y","height","x","Math","round","SliderPoint","props","hovered","onHover","value","position","disabled","withTooltip","focused","active","handlePress","onKeyPress","tooltipFormatter","buttonLabel","onFocus","tooltipZIndex","otherProps","tooltipVisible","setTooltipVisible","theme","tooltipTheme","color","primary","invert","accent","tooltipThemeClassNames","handleFocus","e","on","handleMouseAction","enter","off","pointRef","tooltipPosition","handleBlur","themeClassNames","zIndex"],"sources":["../../../../../../src/components/Slider/SliderPoint/SliderPoint.tsx"],"sourcesContent":["import './SliderPoint.css';\n\nimport React, { useEffect, useRef } from 'react';\n\nimport { useFlag } from '../../../hooks/useFlag/useFlag';\nimport { useForkRef } from '../../../hooks/useForkRef/useForkRef';\nimport { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';\nimport { cn } from '../../../utils/bem';\nimport {\n generateThemeClassNames,\n ThemeContext,\n useTheme,\n} from '../../Theme/Theme';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { SliderPointProps, TrackPosition } from '../helper';\n\nconst cnSliderPoint = cn('SliderPoint');\n\nconst getTooltipPosition = (\n popoverPosition?: TrackPosition,\n buttonRef?: React.RefObject<HTMLButtonElement>,\n) => {\n if (popoverPosition && buttonRef && buttonRef.current) {\n const { y, height } = buttonRef.current.getBoundingClientRect();\n return {\n x: Math.round(popoverPosition.x),\n y: Math.round(y + height / 2),\n };\n }\n\n return { x: 0, y: 0 };\n};\nexport const SliderPoint = (props: SliderPointProps) => {\n const {\n hovered,\n onHover,\n value,\n position,\n disabled,\n withTooltip,\n focused,\n popoverPosition,\n buttonRef,\n active,\n handlePress,\n onKeyPress,\n tooltipFormatter,\n buttonLabel,\n onFocus,\n tooltipZIndex,\n ...otherProps\n } = props;\n\n const [tooltipVisible, setTooltipVisible] = useFlag(false);\n\n const { theme } = useTheme();\n\n const tooltipTheme = {\n ...theme,\n color: {\n primary: theme.color.invert,\n accent: theme.color.accent,\n invert: theme.color.primary,\n },\n };\n\n const tooltipThemeClassNames = generateThemeClassNames(tooltipTheme);\n\n const handleFocus = (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n ) => {\n if (!disabled) {\n onFocus?.(e, buttonLabel);\n setTooltipVisible.on();\n }\n };\n\n const handleMouseAction = (enter: boolean) => {\n if (!disabled) {\n onHover?.(enter);\n enter && setTooltipVisible.on();\n if (enter) setTooltipVisible.on();\n if (!enter && !focused) setTooltipVisible.off();\n }\n };\n\n const handleBlur = (\n e:\n | React.FocusEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLButtonElement>,\n ) => {\n if (!disabled) {\n onFocus?.(e, null);\n setTooltipVisible.off();\n }\n };\n\n const pointRef = useRef<HTMLButtonElement>(null);\n\n const tooltipPosition = getTooltipPosition(\n popoverPosition,\n buttonRef || pointRef,\n );\n\n useEffect(() => {\n focused ? setTooltipVisible.on() : setTooltipVisible.off();\n }, [focused]);\n\n return (\n <>\n <button\n type=\"button\"\n aria-label={`${buttonLabel}-button`}\n className={cnSliderPoint({ hovered, disabled, active }, [\n !disabled ? cnMixFocus() : '',\n ])}\n onMouseOver={() => handleMouseAction(true)}\n onMouseOut={() => handleMouseAction(false)}\n onMouseDown={() => handlePress?.(buttonLabel)}\n onTouchStart={() => handlePress?.(buttonLabel)}\n onKeyDown={(e) => onKeyPress?.(e, buttonLabel)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onClick={handleFocus}\n ref={useForkRef([buttonRef, pointRef])}\n tabIndex={0}\n style={{\n ['--slider-button-left' as string]: `${position}%`,\n }}\n {...otherProps}\n />\n {tooltipVisible && withTooltip && popoverPosition && (\n <ThemeContext.Provider\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n value={{\n theme: tooltipTheme,\n themeClassNames: tooltipThemeClassNames,\n }}\n >\n <Tooltip\n position={tooltipPosition}\n className={cnSliderPoint('Tooltip')}\n direction=\"downCenter\"\n possibleDirections={[\n 'leftCenter',\n 'rightCenter',\n 'downCenter',\n 'leftDown',\n 'rightDown',\n 'upCenter',\n ]}\n style={{ zIndex: tooltipZIndex }}\n offset={10}\n >\n {tooltipFormatter ? tooltipFormatter(value) : value}\n </Tooltip>\n </ThemeContext.Provider>\n )}\n </>\n );\n};\n"],"mappings":"khCAAA,0BAEA,MAAOA,MAAP,EAAgBC,SAAhB,CAA2BC,MAA3B,KAAyC,OAAzC,CAEA,OAASC,OAAT,sCACA,OAASC,UAAT,4CACA,OAASC,UAAT,uCACA,OAASC,EAAT,0BACA,OACEC,uBADF,CAEEC,YAFF,CAGEC,QAHF,yBAKA,OAASC,OAAT,6B,GAGMC,cAAa,CAAGL,EAAE,CAAC,aAAD,C,CAElBM,kBAAkB,CAAG,SACzBC,CADyB,CAEzBC,CAFyB,CAGtB,CACH,GAAID,CAAe,EAAIC,CAAnB,EAAgCA,CAAS,CAACC,OAA9C,CAAuD,CACrD,MAAsBD,CAAS,CAACC,OAAV,CAAkBC,qBAAlB,EAAtB,CAAQC,CAAR,GAAQA,CAAR,CAAWC,CAAX,GAAWA,MAAX,CACA,MAAO,CACLC,CAAC,CAAEC,IAAI,CAACC,KAAL,CAAWR,CAAe,CAACM,CAA3B,CADE,CAELF,CAAC,CAAEG,IAAI,CAACC,KAAL,CAAWJ,CAAC,CAAGC,CAAM,CAAG,CAAxB,CAFE,CAIR,CAED,MAAO,CAAEC,CAAC,CAAE,CAAL,CAAQF,CAAC,CAAE,CAAX,CACR,C,CACD,MAAO,IAAMK,YAAW,CAAG,SAACC,CAAD,CAA6B,IAEpDC,EAFoD,CAmBlDD,CAnBkD,CAEpDC,OAFoD,CAGpDC,CAHoD,CAmBlDF,CAnBkD,CAGpDE,OAHoD,CAIpDC,CAJoD,CAmBlDH,CAnBkD,CAIpDG,KAJoD,CAKpDC,CALoD,CAmBlDJ,CAnBkD,CAKpDI,QALoD,CAMpDC,CANoD,CAmBlDL,CAnBkD,CAMpDK,QANoD,CAOpDC,CAPoD,CAmBlDN,CAnBkD,CAOpDM,WAPoD,CAQpDC,CARoD,CAmBlDP,CAnBkD,CAQpDO,OARoD,CASpDjB,CAToD,CAmBlDU,CAnBkD,CASpDV,eAToD,CAUpDC,CAVoD,CAmBlDS,CAnBkD,CAUpDT,SAVoD,CAWpDiB,CAXoD,CAmBlDR,CAnBkD,CAWpDQ,MAXoD,CAYpDC,CAZoD,CAmBlDT,CAnBkD,CAYpDS,WAZoD,CAapDC,CAboD,CAmBlDV,CAnBkD,CAapDU,UAboD,CAcpDC,CAdoD,CAmBlDX,CAnBkD,CAcpDW,gBAdoD,CAepDC,CAfoD,CAmBlDZ,CAnBkD,CAepDY,WAfoD,CAgBpDC,CAhBoD,CAmBlDb,CAnBkD,CAgBpDa,OAhBoD,CAiBpDC,CAjBoD,CAmBlDd,CAnBkD,CAiBpDc,aAjBoD,CAkBjDC,CAlBiD,0BAmBlDf,CAnBkD,cAqBVpB,OAAO,IArBG,uBAqB/CoC,CArB+C,MAqB/BC,CArB+B,QAuBpC/B,QAAQ,EAvB4B,CAuB9CgC,CAvB8C,GAuB9CA,KAvB8C,CAyBhDC,CAAY,gCACbD,CADa,MAEhBE,KAAK,CAAE,CACLC,OAAO,CAAEH,CAAK,CAACE,KAAN,CAAYE,MADhB,CAELC,MAAM,CAAEL,CAAK,CAACE,KAAN,CAAYG,MAFf,CAGLD,MAAM,CAAEJ,CAAK,CAACE,KAAN,CAAYC,OAHf,CAFS,EAzBoC,CAkChDG,CAAsB,CAAGxC,uBAAuB,CAACmC,CAAD,CAlCA,CAoChDM,CAAW,CAAG,SAClBC,CADkB,CAEf,CACErB,CADF,UAEDQ,CAFC,WAEDA,CAFC,QAEDA,CAAO,CAAGa,CAAH,CAAMd,CAAN,CAFN,CAGDK,CAAiB,CAACU,EAAlB,EAHC,CAKJ,CA3CqD,CA6ChDC,CAAiB,CAAG,SAACC,CAAD,CAAoB,CACvCxB,CADuC,UAE1CH,CAF0C,WAE1CA,CAF0C,QAE1CA,CAAO,CAAG2B,CAAH,CAFmC,CAG1CA,CAAK,EAAIZ,CAAiB,CAACU,EAAlB,EAHiC,CAItCE,CAJsC,EAI/BZ,CAAiB,CAACU,EAAlB,EAJ+B,CAKtC,CAACE,CAAD,EAAU,CAACtB,CAL2B,EAKlBU,CAAiB,CAACa,GAAlB,EALkB,CAO7C,CApDqD,CAiEhDC,CAAQ,CAAGpD,MAAM,CAAoB,IAApB,CAjE+B,CAmEhDqD,CAAe,CAAG3C,kBAAkB,CACxCC,CADwC,CAExCC,CAAS,EAAIwC,CAF2B,CAnEY,CA4EtD,MAJArD,UAAS,CAAC,UAAM,CACd6B,CAAO,CAAGU,CAAiB,CAACU,EAAlB,EAAH,CAA4BV,CAAiB,CAACa,GAAlB,EACpC,CAFQ,CAEN,CAACvB,CAAD,CAFM,CAIT,CACE,wCACE,4CACE,IAAI,CAAC,QADP,CAEE,uBAAeK,CAAf,WAFF,CAGE,SAAS,CAAExB,aAAa,CAAC,CAAEa,OAAO,CAAPA,CAAF,CAAWI,QAAQ,CAARA,CAAX,CAAqBG,MAAM,CAANA,CAArB,CAAD,CAAgC,CACrDH,CAAD,CAA2B,EAA3B,CAAYvB,UAAU,EADgC,CAAhC,CAH1B,CAME,WAAW,CAAE,6BAAM8C,EAAiB,IAAvB,CANf,CAOE,UAAU,CAAE,4BAAMA,EAAiB,IAAvB,CAPd,CAQE,WAAW,CAAE,qCAAMnB,CAAN,WAAMA,CAAN,QAAMA,CAAW,CAAGG,CAAH,CAAjB,CARf,CASE,YAAY,CAAE,sCAAMH,CAAN,WAAMA,CAAN,QAAMA,CAAW,CAAGG,CAAH,CAAjB,CAThB,CAUE,SAAS,CAAE,mBAACc,CAAD,gBAAOhB,CAAP,WAAOA,CAAP,QAAOA,CAAU,CAAGgB,CAAH,CAAMd,CAAN,CAAjB,CAVb,CAWE,OAAO,CAAEa,CAXX,CAYE,MAAM,CApCO,QAAbQ,WAAa,CACjBP,CADiB,CAId,CACErB,CADF,UAEDQ,CAFC,WAEDA,CAFC,QAEDA,CAAO,CAAGa,CAAH,CAAM,IAAN,CAFN,CAGDT,CAAiB,CAACa,GAAlB,EAHC,CAKJ,CAeG,CAaE,OAAO,CAAEL,CAbX,CAcE,GAAG,CAAE5C,UAAU,CAAC,CAACU,CAAD,CAAYwC,CAAZ,CAAD,CAdjB,CAeE,QAAQ,CAAE,CAfZ,CAgBE,KAAK,oBACF,sBADE,WACoC3B,CADpC,MAhBP,EAmBMW,CAnBN,EADF,CAsBGC,CAAc,EAAIV,CAAlB,EAAiChB,CAAjC,EACC,oBAAC,YAAD,CAAc,QAAd,EAEE,KAAK,CAAE,CACL4B,KAAK,CAAEC,CADF,CAELe,eAAe,CAAEV,CAFZ,CAFT,EAOE,oBAAC,OAAD,EACE,QAAQ,CAAEQ,CADZ,CAEE,SAAS,CAAE5C,aAAa,CAAC,SAAD,CAF1B,CAGE,SAAS,CAAC,YAHZ,CAIE,kBAAkB,CAAE,CAClB,YADkB,CAElB,aAFkB,CAGlB,YAHkB,CAIlB,UAJkB,CAKlB,WALkB,CAMlB,UANkB,CAJtB,CAYE,KAAK,CAAE,CAAE+C,MAAM,CAAErB,CAAV,CAZT,CAaE,MAAM,CAAE,EAbV,EAeGH,CAAgB,CAAGA,CAAgB,CAACR,CAAD,CAAnB,CAA6BA,CAfhD,CAPF,CAvBJ,CAmDH,CAhIM"}
@@ -64,10 +64,13 @@ export declare type SliderPointProps = PropsWithHTMLAttributes<{
64
64
  onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;
65
65
  onHover?: (hovered: boolean) => void;
66
66
  position: number;
67
+ active?: boolean;
67
68
  tooltipZIndex?: number;
68
69
  }, HTMLButtonElement>;
69
70
  export declare type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<Props<RANGE>, HTMLDivElement>;
70
71
  export declare type SliderComponent = <RANGE extends boolean = false>(props: SliderProps<RANGE>) => React.ReactElement | null;
72
+ export declare const isRangeParams: (params: Props<boolean>) => params is Props<true>;
73
+ export declare const isNotRangeParams: (params: Props<boolean>) => params is Props<false>;
71
74
  export declare const defaultTooltipFormatter: PropToolipFormatter;
72
75
  export declare type TrackPosition = {
73
76
  x: number;
@@ -82,4 +85,5 @@ export declare const getOnChandgeForInput: (props: SliderProps<boolean>, field:
82
85
  export declare const getIcon: (side?: Side) => IconComponent | undefined;
83
86
  export declare const getMaxForStartField: (props: SliderProps<boolean>) => number | undefined;
84
87
  export declare const getMinForEndField: (props: SliderProps<boolean>) => number | undefined;
88
+ export declare const getValidStep: (min: number, max: number, step?: number | number[]) => number | number[];
85
89
  export {};
@@ -1,2 +1,2 @@
1
- export var propStatus=["alert","warning","success"];export var defaultPropStatus=propStatus[0];export var propSize=["s","xs","m","l"];export var defaultPropSize=propSize[0];var isRangeParams=function(a){return!!a.range},isNotRangeParams=function(a){return!a.range};export var defaultTooltipFormatter=function(a){return(null===a||void 0===a?void 0:a.toString())||""};export var getValueForInput=function(a,b){return isRangeParams(a)?a.value[b]:a.value};export var getOnChandgeForInput=function(a,b){return function(c){var d=c.e,e=c.value;a.onChange&&(isNotRangeParams(a)&&a.onChange({e:d,value:e}),isRangeParams(a)&&a.onChange({e:d,value:b?[a.value[0],e]:[e,a.value[1]]}))}};export var getIcon=function(a){if("input"!==a)return a};export var getMaxForStartField=function(a){return isNotRangeParams(a)?a.max:isRangeParams(a)?a.value[1]:void 0};export var getMinForEndField=function(a){return isNotRangeParams(a)?a.min:isRangeParams(a)?a.value[0]:void 0};
1
+ export var propStatus=["alert","warning","success"];export var defaultPropStatus=propStatus[0];export var propSize=["s","xs","m","l"];export var defaultPropSize=propSize[0];export var isRangeParams=function(a){return!!a.range};export var isNotRangeParams=function(a){return!a.range};export var defaultTooltipFormatter=function(a){return(null===a||void 0===a?void 0:a.toString())||""};export var getValueForInput=function(a,b){return isRangeParams(a)?a.value[b]:a.value};export var getOnChandgeForInput=function(a,b){return function(c){var d=c.e,e=c.value;a.onChange&&(isNotRangeParams(a)&&a.onChange({e:d,value:e}),isRangeParams(a)&&a.onChange({e:d,value:b?[a.value[0],e]:[e,a.value[1]]}))}};export var getIcon=function(a){if("input"!==a)return a};export var getMaxForStartField=function(a){return isNotRangeParams(a)?a.max:isRangeParams(a)?a.value[1]:void 0};export var getMinForEndField=function(a){return isNotRangeParams(a)?a.min:isRangeParams(a)?a.value[0]:void 0};export var getValidStep=function(a,b,c){return c?Array.isArray(c)?c:0>=c?1:c:Math.abs((b-a)/100)};
2
2
  //# sourceMappingURL=helper.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n | Event\n | React.TouchEvent\n | React.MouseEvent\n | React.KeyboardEvent\n | React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Side = IconComponent | 'input';\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number | number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n labelIcon?: IconComponent;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?: Side;\n tooltipFormatter?: PropToolipFormatter;\n rightSide?: Side;\n};\n\nexport type Line = {\n width: number;\n active: boolean;\n size?: number[];\n};\n\nexport type SliderLineProps = {\n view?: PropView;\n lines: Line[];\n disabled?: boolean;\n hovered?: boolean;\n onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n {\n value?: number;\n disabled?: boolean;\n focused?: boolean;\n hovered?: boolean;\n withTooltip?: boolean;\n handlePress?: (typeButton: ActiveButton) => void;\n buttonLabel?: ActiveButton;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n popoverPosition?: TrackPosition;\n tooltipFormatter?: PropToolipFormatter;\n onFocus?: (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n button: ActiveButton,\n ) => void;\n onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n onHover?: (hovered: boolean) => void;\n position: number;\n tooltipZIndex?: number;\n },\n HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n Props<RANGE>,\n HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n) => React.ReactElement | null;\n\nconst isRangeParams = (params: Props<boolean>): params is Props<true> => {\n return !!params.range;\n};\n\nconst isNotRangeParams = (params: Props<boolean>): params is Props<false> => {\n return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n value?.toString() || '';\n\nexport type TrackPosition = {\n x: number;\n y: number;\n} | null;\n\nexport const getValueForInput = (\n props: SliderProps<boolean>,\n field: 0 | 1,\n): number => {\n if (isRangeParams(props)) {\n return props.value[field];\n }\n return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n (props: SliderProps<boolean>, field: 0 | 1): GetOnChandgeForInputReturned =>\n ({ e, value }) => {\n if (!props.onChange) {\n return;\n }\n if (isNotRangeParams(props)) {\n props.onChange({ e, value });\n }\n if (isRangeParams(props)) {\n props.onChange({\n e,\n value: field ? [props.value[0], value] : [value, props.value[1]],\n });\n }\n };\n\nexport const getIcon = (side?: Side) => {\n if (side !== 'input') {\n return side;\n }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.max;\n }\n if (isRangeParams(props)) {\n return props.value[1];\n }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.min;\n }\n if (isRangeParams(props)) {\n return props.value[0];\n }\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,C,GAuFDE,cAAa,CAAG,SAACC,CAAD,CAAmD,CACvE,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,C,CAEKC,gBAAgB,CAAG,SAACF,CAAD,CAAoD,CAC3E,MAAO,CAACA,CAAM,CAACC,KAChB,C,CAED,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM"}
1
+ {"version":3,"file":"helper.js","names":["propStatus","defaultPropStatus","propSize","defaultPropSize","isRangeParams","params","range","isNotRangeParams","defaultTooltipFormatter","value","toString","getValueForInput","props","field","getOnChandgeForInput","e","onChange","getIcon","side","getMaxForStartField","max","getMinForEndField","min","getValidStep","step","Array","isArray","Math","abs"],"sources":["../../../../../src/components/Slider/helper.ts"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React from 'react';\n\nimport { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';\nimport { ActiveButton } from './useSlider/helper';\n\nexport const propStatus = ['alert', 'warning', 'success'] as const;\nexport type PropStatus = typeof propStatus[number];\nexport const defaultPropStatus = propStatus[0];\n\nexport type PropView = 'default' | 'division';\n\nexport const propSize = ['s', 'xs', 'm', 'l'] as const;\nexport type PropSize = typeof propSize[number];\nexport const defaultPropSize: PropSize = propSize[0];\n\nexport type SliderValue<RANGE> = RANGE extends true ? [number, number] : number;\n\nexport type PropOnChange<RANGE> = (prop: {\n e?:\n | Event\n | React.TouchEvent\n | React.MouseEvent\n | React.KeyboardEvent\n | React.ChangeEvent;\n value: SliderValue<RANGE>;\n}) => void;\n\ntype PropToolipFormatter = (value: number | undefined) => string;\n\ntype Side = IconComponent | 'input';\n\ntype Props<RANGE extends boolean = false> = {\n className?: string;\n step?: number | number[];\n view?: PropView;\n disabled?: boolean;\n range?: RANGE;\n withTooltip?: boolean;\n value: SliderValue<RANGE>;\n label?: string;\n labelIcon?: IconComponent;\n caption?: string;\n status?: PropStatus;\n min?: number;\n size?: PropSize;\n max?: number;\n onChange?: PropOnChange<RANGE>;\n onAfterChange?: PropOnChange<RANGE>;\n leftSide?: Side;\n tooltipFormatter?: PropToolipFormatter;\n rightSide?: Side;\n};\n\nexport type Line = {\n width: number;\n active: boolean;\n size?: number[];\n};\n\nexport type SliderLineProps = {\n view?: PropView;\n lines: Line[];\n disabled?: boolean;\n hovered?: boolean;\n onHover?: (hovered: boolean) => void;\n};\n\nexport type SliderPointProps = PropsWithHTMLAttributes<\n {\n value?: number;\n disabled?: boolean;\n focused?: boolean;\n hovered?: boolean;\n withTooltip?: boolean;\n handlePress?: (typeButton: ActiveButton) => void;\n buttonLabel?: ActiveButton;\n buttonRef?: React.RefObject<HTMLButtonElement>;\n popoverPosition?: TrackPosition;\n tooltipFormatter?: PropToolipFormatter;\n onFocus?: (\n e: React.FocusEvent<HTMLButtonElement> | React.MouseEvent,\n button: ActiveButton,\n ) => void;\n onKeyPress?: (e: React.KeyboardEvent, typeButton?: ActiveButton) => void;\n onHover?: (hovered: boolean) => void;\n position: number;\n active?: boolean;\n tooltipZIndex?: number;\n },\n HTMLButtonElement\n>;\n\nexport type SliderProps<RANGE extends boolean> = PropsWithHTMLAttributes<\n Props<RANGE>,\n HTMLDivElement\n>;\n\nexport type SliderComponent = <RANGE extends boolean = false>(\n props: SliderProps<RANGE>,\n) => React.ReactElement | null;\n\nexport const isRangeParams = (\n params: Props<boolean>,\n): params is Props<true> => {\n return !!params.range;\n};\n\nexport const isNotRangeParams = (\n params: Props<boolean>,\n): params is Props<false> => {\n return !params.range;\n};\n\nexport const defaultTooltipFormatter: PropToolipFormatter = (value) =>\n value?.toString() || '';\n\nexport type TrackPosition = {\n x: number;\n y: number;\n} | null;\n\nexport const getValueForInput = (\n props: SliderProps<boolean>,\n field: 0 | 1,\n): number => {\n if (isRangeParams(props)) {\n return props.value[field];\n }\n return props.value as number;\n};\n\ntype GetOnChandgeForInputReturned = (props: {\n e?: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent;\n value: number;\n}) => void;\n\nexport const getOnChandgeForInput =\n (props: SliderProps<boolean>, field: 0 | 1): GetOnChandgeForInputReturned =>\n ({ e, value }) => {\n if (!props.onChange) {\n return;\n }\n if (isNotRangeParams(props)) {\n props.onChange({ e, value });\n }\n if (isRangeParams(props)) {\n props.onChange({\n e,\n value: field ? [props.value[0], value] : [value, props.value[1]],\n });\n }\n };\n\nexport const getIcon = (side?: Side) => {\n if (side !== 'input') {\n return side;\n }\n};\n\nexport const getMaxForStartField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.max;\n }\n if (isRangeParams(props)) {\n return props.value[1];\n }\n};\n\nexport const getMinForEndField = (props: SliderProps<boolean>) => {\n if (isNotRangeParams(props)) {\n return props.min;\n }\n if (isRangeParams(props)) {\n return props.value[0];\n }\n};\n\nexport const getValidStep = (\n min: number,\n max: number,\n step?: number | number[],\n) => {\n if (step) {\n if (Array.isArray(step)) {\n return step;\n }\n if (step <= 0) {\n return 1;\n }\n return step;\n }\n return Math.abs((max - min) / 100);\n};\n"],"mappings":"AAMA,MAAO,IAAMA,WAAU,CAAG,CAAC,OAAD,CAAU,SAAV,CAAqB,SAArB,CAAnB,CAEP,MAAO,IAAMC,kBAAiB,CAAGD,UAAU,CAAC,CAAD,CAApC,CAIP,MAAO,IAAME,SAAQ,CAAG,CAAC,GAAD,CAAM,IAAN,CAAY,GAAZ,CAAiB,GAAjB,CAAjB,CAEP,MAAO,IAAMC,gBAAyB,CAAGD,QAAQ,CAAC,CAAD,CAA1C,CAwFP,MAAO,IAAME,cAAa,CAAG,SAC3BC,CAD2B,CAED,CAC1B,MAAO,CAAC,CAACA,CAAM,CAACC,KACjB,CAJM,CAMP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BF,CAD8B,CAEH,CAC3B,MAAO,CAACA,CAAM,CAACC,KAChB,CAJM,CAMP,MAAO,IAAME,wBAA4C,CAAG,SAACC,CAAD,QAC1D,QAAAA,CAAK,WAALA,CAAA,QAAAA,CAAK,CAAEC,QAAP,KAAqB,EADqC,CAArD,CAQP,MAAO,IAAMC,iBAAgB,CAAG,SAC9BC,CAD8B,CAE9BC,CAF8B,CAGnB,OACPT,cAAa,CAACQ,CAAD,CADN,CAEFA,CAAK,CAACH,KAAN,CAAYI,CAAZ,CAFE,CAIJD,CAAK,CAACH,KACd,CARM,CAeP,MAAO,IAAMK,qBAAoB,CAC/B,SAACF,CAAD,CAA8BC,CAA9B,QACA,YAAkB,IAAfE,EAAe,GAAfA,CAAe,CAAZN,CAAY,GAAZA,KAAY,CACXG,CAAK,CAACI,QADK,GAIZT,gBAAgB,CAACK,CAAD,CAJJ,EAKdA,CAAK,CAACI,QAAN,CAAe,CAAED,CAAC,CAADA,CAAF,CAAKN,KAAK,CAALA,CAAL,CAAf,CALc,CAOZL,aAAa,CAACQ,CAAD,CAPD,EAQdA,CAAK,CAACI,QAAN,CAAe,CACbD,CAAC,CAADA,CADa,CAEbN,KAAK,CAAEI,CAAK,CAAG,CAACD,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAD,CAAiBA,CAAjB,CAAH,CAA6B,CAACA,CAAD,CAAQG,CAAK,CAACH,KAAN,CAAY,CAAZ,CAAR,CAF5B,CAAf,CARc,CAajB,CAdD,CADK,CAiBP,MAAO,IAAMQ,QAAO,CAAG,SAACC,CAAD,CAAiB,CACtC,GAAa,OAAT,GAAAA,CAAJ,CACE,MAAOA,EAEV,CAJM,CAMP,MAAO,IAAMC,oBAAmB,CAAG,SAACP,CAAD,CAAiC,OAC9DL,iBAAgB,CAACK,CAAD,CAD8C,CAEzDA,CAAK,CAACQ,GAFmD,CAI9DhB,aAAa,CAACQ,CAAD,CAJiD,CAKzDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALyD,OAOnE,CAPM,CASP,MAAO,IAAMY,kBAAiB,CAAG,SAACT,CAAD,CAAiC,OAC5DL,iBAAgB,CAACK,CAAD,CAD4C,CAEvDA,CAAK,CAACU,GAFiD,CAI5DlB,aAAa,CAACQ,CAAD,CAJ+C,CAKvDA,CAAK,CAACH,KAAN,CAAY,CAAZ,CALuD,OAOjE,CAPM,CASP,MAAO,IAAMc,aAAY,CAAG,SAC1BD,CAD0B,CAE1BF,CAF0B,CAG1BI,CAH0B,CAIvB,OACCA,EADD,CAEGC,KAAK,CAACC,OAAN,CAAcF,CAAd,CAFH,CAGQA,CAHR,CAKW,CAAR,EAAAA,CALH,CAMQ,CANR,CAQMA,CARN,CAUIG,IAAI,CAACC,GAAL,CAAS,CAACR,CAAG,CAAGE,CAAP,EAAc,GAAvB,CACR,CAfM"}