@vibe/core 3.18.0-alpha-a3fe2.0 → 3.18.0

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 (75) hide show
  1. package/dist/components/Avatar/Avatar.types.d.ts +1 -1
  2. package/dist/components/Avatar/AvatarConstants.d.ts +1 -0
  3. package/dist/components/Counter/Counter.types.d.ts +1 -1
  4. package/dist/components/Counter/CounterConstants.d.ts +1 -0
  5. package/dist/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.d.ts +4 -0
  6. package/dist/components/Modal/Modal/Modal.types.d.ts +0 -24
  7. package/dist/components/Modal/context/ModalContext.types.d.ts +0 -4
  8. package/dist/components/Slider/Slider.d.ts +9 -1
  9. package/dist/components/Slider/Slider.types.d.ts +4 -0
  10. package/dist/components/Slider/SliderConstants.d.ts +3 -1
  11. package/dist/components/Slider/SliderContext.d.ts +1 -1
  12. package/dist/mocked_classnames/components/Avatar/Avatar.types.d.ts +1 -1
  13. package/dist/mocked_classnames/components/Avatar/AvatarConstants.d.ts +1 -0
  14. package/dist/mocked_classnames/components/Counter/Counter.types.d.ts +1 -1
  15. package/dist/mocked_classnames/components/Counter/CounterConstants.d.ts +1 -0
  16. package/dist/mocked_classnames/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.types.d.ts +4 -0
  17. package/dist/mocked_classnames/components/Modal/Modal/Modal.types.d.ts +0 -24
  18. package/dist/mocked_classnames/components/Modal/context/ModalContext.types.d.ts +0 -4
  19. package/dist/mocked_classnames/components/Slider/Slider.d.ts +9 -1
  20. package/dist/mocked_classnames/components/Slider/Slider.types.d.ts +4 -0
  21. package/dist/mocked_classnames/components/Slider/SliderConstants.d.ts +3 -1
  22. package/dist/mocked_classnames/components/Slider/SliderContext.d.ts +1 -1
  23. package/dist/mocked_classnames/src/components/Avatar/Avatar.module.scss.js +1 -1
  24. package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  25. package/dist/mocked_classnames/src/components/Avatar/AvatarConstants.js +1 -1
  26. package/dist/mocked_classnames/src/components/Avatar/AvatarConstants.js.map +1 -1
  27. package/dist/mocked_classnames/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  28. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
  29. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
  30. package/dist/mocked_classnames/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  31. package/dist/mocked_classnames/src/components/Counter/Counter.module.scss.js +1 -1
  32. package/dist/mocked_classnames/src/components/Counter/CounterConstants.js +1 -1
  33. package/dist/mocked_classnames/src/components/Counter/CounterConstants.js.map +1 -1
  34. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js +1 -1
  35. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js.map +1 -1
  36. package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss.js +1 -1
  37. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
  38. package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
  39. package/dist/mocked_classnames/src/components/Modal/ModalContent/ModalContent.js +1 -1
  40. package/dist/mocked_classnames/src/components/Modal/ModalContent/ModalContent.js.map +1 -1
  41. package/dist/mocked_classnames/src/components/Slider/Slider.js +1 -1
  42. package/dist/mocked_classnames/src/components/Slider/Slider.js.map +1 -1
  43. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js +1 -1
  44. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
  45. package/dist/mocked_classnames/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  46. package/dist/mocked_classnames/src/components/Slider/SliderConstants.js.map +1 -1
  47. package/dist/mocked_classnames/src/components/Slider/SliderContext.js +1 -1
  48. package/dist/mocked_classnames/src/components/Slider/SliderContext.js.map +1 -1
  49. package/dist/src/components/Avatar/Avatar.module.scss.js +1 -1
  50. package/dist/src/components/Avatar/AvatarBadge.module.scss.js +1 -1
  51. package/dist/src/components/Avatar/AvatarConstants.js +1 -1
  52. package/dist/src/components/Avatar/AvatarConstants.js.map +1 -1
  53. package/dist/src/components/Avatar/AvatarContent.module.scss.js +1 -1
  54. package/dist/src/components/AvatarGroup/AvatarGroupCounter.js +1 -1
  55. package/dist/src/components/AvatarGroup/AvatarGroupCounter.js.map +1 -1
  56. package/dist/src/components/AvatarGroup/AvatarGroupCounter.module.scss.js +1 -1
  57. package/dist/src/components/Counter/Counter.module.scss.js +1 -1
  58. package/dist/src/components/Counter/CounterConstants.js +1 -1
  59. package/dist/src/components/Counter/CounterConstants.js.map +1 -1
  60. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js +1 -1
  61. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js.map +1 -1
  62. package/dist/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.module.scss.js +1 -1
  63. package/dist/src/components/Modal/Modal/Modal.js +1 -1
  64. package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
  65. package/dist/src/components/Modal/ModalContent/ModalContent.js +1 -1
  66. package/dist/src/components/Modal/ModalContent/ModalContent.js.map +1 -1
  67. package/dist/src/components/Slider/Slider.js +1 -1
  68. package/dist/src/components/Slider/Slider.js.map +1 -1
  69. package/dist/src/components/Slider/SliderBase/SliderThumb.js +1 -1
  70. package/dist/src/components/Slider/SliderBase/SliderThumb.js.map +1 -1
  71. package/dist/src/components/Slider/SliderBase/SliderThumb.module.scss.js +1 -1
  72. package/dist/src/components/Slider/SliderConstants.js.map +1 -1
  73. package/dist/src/components/Slider/SliderContext.js +1 -1
  74. package/dist/src/components/Slider/SliderContext.js.map +1 -1
  75. package/package.json +3 -3
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import c from"react-focus-lock";import{AnimatePresence as d,motion as u}from"framer-motion";import{getTestId as f}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import v from"./Modal.module.scss.js";import y from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as L}from"react-dom";import P from"../hooks/usePortalTarget/usePortalTarget.js";import C from"../../LayerProvider/LayerProvider.js";import k from"../../../hooks/useMergeRef.js";var w=c.default||c,I=r((function(r,c){var I=r.id,N=r.show,g=r.size,z=void 0===g?"medium":g,F=r.renderHeaderAction,H=r.closeButtonTheme,_=r.closeButtonAriaLabel,B=r.onClose,D=void 0===B?function(){}:B,R=r.autoFocus,O=void 0===R||R,V=r.onFocusAttempt,X=r.anchorElementRef,K=r.alertModal,S=r.container,Y=void 0===S?document.body:S,q=r.children,G=r.style,J=r.zIndex,Q=r.className,U=r["data-testid"],W=r["aria-labelledby"],Z=r["aria-describedby"],$=P(Y),ee=a(null),te=k(c,ee),oe=a(null),re=i(),ae=e(re,2),ie=ae[0],se=ae[1],ne=i(),le=e(ne,2),me=le[0],ce=le[1],de=s((function(e){W||se(e)}),[W]),ue=s((function(e){Z||ce(e)}),[Z]),fe=n((function(){return{modalId:I,setTitleId:de,setDescriptionId:ue,autoFocus:O}}),[I,de,ue,O]),pe=s((function(e){N&&!K&&D(e)}),[N,K,D]),ve=s((function(e){e.key===A.ESCAPE&&N&&!K&&D(e)}),[K,D,N]),ye="full-view"===z?h:(null==X?void 0:X.current)?x:M,Ee=J?{"--monday-modal-z-index":J}:{},be=s((function(e){if(!V)return!0;var t=V(e);return!0===t||t instanceof HTMLElement&&(t.focus(),!1)}),[V]);return o.createElement(d,null,N&&o.createElement(C,{layerRef:oe},o.createElement(j,{value:fe},L(o.createElement(w,{returnFocus:!0,autoFocus:O,whiteList:be},o.createElement("div",{ref:oe,className:v.container,style:Ee},o.createElement(u.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":f(p.MODAL_NEXT_OVERLAY,I),className:v.overlay,onClick:pe,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:te},o.createElement(u.div,{variants:ye,initial:"exit",animate:"enter",exit:"exit",custom:X,className:l(v.modal,E(v,b("size-"+z)),t({},v.withHeaderAction,!!F),Q),id:I,"data-testid":U||f(p.MODAL_NEXT,I),role:"dialog","aria-modal":!0,"aria-labelledby":W||ie,"aria-describedby":Z||me,style:G,onKeyDown:ve,tabIndex:-1},q,o.createElement(y,{renderAction:F,theme:H,closeButtonAriaLabel:_,onClose:D}))))),$))))}));export{I as default};
1
+ import{slicedToArray as e,defineProperty as t}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as r,useRef as a,useState as i,useCallback as s,useMemo as n}from"react";import l from"classnames";import{RemoveScroll as m}from"react-remove-scroll";import d from"react-focus-lock";import{AnimatePresence as c,motion as f}from"framer-motion";import{getTestId as u}from"../../../tests/testIds.js";import{ComponentDefaultTestId as p}from"../../../tests/constants.js";import y from"./Modal.module.scss.js";import v from"../ModalTopActions/ModalTopActions.js";import{getStyle as E}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as b}from"lodash-es";import{ModalProvider as j}from"../context/ModalContext.js";import{keyCodes as A}from"../../../constants/keyCodes.js";import"../../../constants/sizes.js";import{modalAnimationFullViewVariants as h,modalAnimationAnchorPopVariants as x,modalAnimationCenterPopVariants as M,modalAnimationOverlayVariants as T}from"../utils/animationVariants.js";import{createPortal as P}from"react-dom";import C from"../hooks/usePortalTarget/usePortalTarget.js";import L from"../../LayerProvider/LayerProvider.js";import k from"../../../hooks/useMergeRef.js";var I=d.default||d,N=r((function(r,d){var N=r.id,g=r.show,w=r.size,z=void 0===w?"medium":w,_=r.renderHeaderAction,B=r.closeButtonTheme,D=r.closeButtonAriaLabel,H=r.onClose,R=void 0===H?function(){}:H,O=r.anchorElementRef,V=r.alertModal,X=r.container,F=void 0===X?document.body:X,K=r.children,S=r.style,Y=r.zIndex,q=r.className,G=r["data-testid"],J=r["aria-labelledby"],Q=r["aria-describedby"],U=C(F),W=a(null),Z=k(d,W),$=a(null),ee=i(),te=e(ee,2),oe=te[0],re=te[1],ae=i(),ie=e(ae,2),se=ie[0],ne=ie[1],le=s((function(e){J||re(e)}),[J]),me=s((function(e){Q||ne(e)}),[Q]),de=n((function(){return{modalId:N,setTitleId:le,setDescriptionId:me}}),[N,le,me]),ce=s((function(e){g&&!V&&R(e)}),[g,V,R]),fe=s((function(e){e.key===A.ESCAPE&&g&&!V&&R(e)}),[V,R,g]),ue="full-view"===z?h:(null==O?void 0:O.current)?x:M;return o.createElement(c,null,g&&o.createElement(L,{layerRef:$},o.createElement(j,{value:de},P(o.createElement(I,{returnFocus:!0},o.createElement("div",{ref:$,className:y.container,style:Y?{"--monday-modal-z-index":Y}:{}},o.createElement(f.div,{variants:T,initial:"initial",animate:"enter",exit:"exit","data-testid":u(p.MODAL_NEXT_OVERLAY,N),className:y.overlay,onClick:ce,"aria-hidden":!0}),o.createElement(m,{forwardProps:!0,ref:Z},o.createElement(f.div,{variants:ue,initial:"exit",animate:"enter",exit:"exit",custom:O,className:l(y.modal,E(y,b("size-"+z)),t({},y.withHeaderAction,!!_),q),id:N,"data-testid":G||u(p.MODAL_NEXT,N),role:"dialog","aria-modal":!0,"aria-labelledby":J||oe,"aria-describedby":Q||se,style:S,onKeyDown:fe,tabIndex:-1},K,o.createElement(v,{renderAction:_,theme:B,closeButtonAriaLabel:D,onClose:R}))))),U))))}));export{N as default};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n autoFocus = true,\n onFocusAttempt,\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback,\n autoFocus\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback, autoFocus]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n const handleFocusLockWhiteList = useCallback(\n (nextFocusedElement?: HTMLElement) => {\n if (!onFocusAttempt) return true;\n\n const outcome = onFocusAttempt(nextFocusedElement);\n\n if (outcome === true) return true;\n\n if (outcome instanceof HTMLElement) {\n outcome.focus();\n return false;\n }\n\n return false;\n },\n [onFocusAttempt]\n );\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus autoFocus={autoFocus} whiteList={handleFocusLockWhiteList}>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","_ref$autoFocus","autoFocus","onFocusAttempt","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","zIndexStyle","handleFocusLockWhiteList","nextFocusedElement","outcome","HTMLElement","focus","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","whiteList","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../../src/components/Modal/Modal/Modal.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport FocusLock from \"react-focus-lock\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport styles from \"./Modal.module.scss\";\nimport { ModalProps } from \"./Modal.types\";\nimport ModalTopActions from \"../ModalTopActions/ModalTopActions\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"lodash-es\";\nimport { ModalProvider } from \"../context/ModalContext\";\nimport { ModalProviderValue } from \"../context/ModalContext.types\";\nimport { keyCodes } from \"../../../constants\";\nimport {\n modalAnimationAnchorPopVariants,\n modalAnimationCenterPopVariants,\n modalAnimationFullViewVariants,\n modalAnimationOverlayVariants\n} from \"../utils/animationVariants\";\nimport { createPortal } from \"react-dom\";\nimport usePortalTarget from \"../hooks/usePortalTarget/usePortalTarget\";\nimport { LayerProvider } from \"../../LayerProvider\";\nimport useMergeRef from \"../../../hooks/useMergeRef\";\n\n// @ts-expect-error This is a precaution to support all possible module systems (ESM/CJS)\nconst FocusLockComponent = (FocusLock.default || FocusLock) as typeof FocusLock;\n\nconst Modal = forwardRef(\n (\n {\n id,\n show,\n size = \"medium\",\n renderHeaderAction,\n closeButtonTheme,\n closeButtonAriaLabel,\n onClose = () => {},\n anchorElementRef,\n alertModal,\n container = document.body,\n children,\n style,\n zIndex,\n className,\n \"data-testid\": dataTestId,\n \"aria-labelledby\": ariaLabelledby,\n \"aria-describedby\": ariaDescribedby\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const portalTargetElement = usePortalTarget(container);\n\n const modalRef = useRef<HTMLDivElement>(null);\n const modalMergedRef = useMergeRef<HTMLDivElement>(ref, modalRef);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [titleId, setTitleId] = useState<string>();\n const [descriptionId, setDescriptionId] = useState<string>();\n\n const setTitleIdCallback = useCallback(\n (newId: string) => {\n if (ariaLabelledby) return;\n setTitleId(newId);\n },\n [ariaLabelledby]\n );\n const setDescriptionIdCallback = useCallback(\n (newId: string) => {\n if (ariaDescribedby) return;\n setDescriptionId(newId);\n },\n [ariaDescribedby]\n );\n\n const contextValue = useMemo<ModalProviderValue>(\n () => ({\n modalId: id,\n setTitleId: setTitleIdCallback,\n setDescriptionId: setDescriptionIdCallback\n }),\n [id, setTitleIdCallback, setDescriptionIdCallback]\n );\n\n const onBackdropClick = useCallback<React.MouseEventHandler<HTMLDivElement>>(\n e => {\n if (!show || alertModal) return;\n onClose(e);\n },\n [show, alertModal, onClose]\n );\n\n const onModalKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n e => {\n if (e.key !== keyCodes.ESCAPE || !show || alertModal) return;\n onClose(e);\n },\n [alertModal, onClose, show]\n );\n\n const modalAnimationVariants =\n size === \"full-view\"\n ? modalAnimationFullViewVariants\n : anchorElementRef?.current\n ? modalAnimationAnchorPopVariants\n : modalAnimationCenterPopVariants;\n\n const zIndexStyle = zIndex ? ({ \"--monday-modal-z-index\": zIndex } as React.CSSProperties) : {};\n\n return (\n <AnimatePresence>\n {show && (\n <LayerProvider layerRef={containerRef}>\n <ModalProvider value={contextValue}>\n {createPortal(\n <FocusLockComponent returnFocus>\n <div ref={containerRef} className={styles.container} style={zIndexStyle}>\n <motion.div\n variants={modalAnimationOverlayVariants}\n initial=\"initial\"\n animate=\"enter\"\n exit=\"exit\"\n data-testid={getTestId(ComponentDefaultTestId.MODAL_NEXT_OVERLAY, id)}\n className={styles.overlay}\n onClick={onBackdropClick}\n aria-hidden\n />\n <RemoveScroll forwardProps ref={modalMergedRef}>\n <motion.div\n variants={modalAnimationVariants}\n initial=\"exit\"\n animate=\"enter\"\n exit=\"exit\"\n custom={anchorElementRef}\n className={cx(\n styles.modal,\n getStyle(styles, camelCase(\"size-\" + size)),\n { [styles.withHeaderAction]: !!renderHeaderAction },\n className\n )}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT, id)}\n role=\"dialog\"\n aria-modal\n aria-labelledby={ariaLabelledby || titleId}\n aria-describedby={ariaDescribedby || descriptionId}\n style={style}\n onKeyDown={onModalKeyDown}\n tabIndex={-1}\n >\n {children}\n <ModalTopActions\n renderAction={renderHeaderAction}\n theme={closeButtonTheme}\n closeButtonAriaLabel={closeButtonAriaLabel}\n onClose={onClose}\n />\n </motion.div>\n </RemoveScroll>\n </div>\n </FocusLockComponent>,\n portalTargetElement\n )}\n </ModalProvider>\n </LayerProvider>\n )}\n </AnimatePresence>\n );\n }\n);\n\nexport default Modal;\n"],"names":["FocusLockComponent","FocusLock","default","Modal","forwardRef","_ref","ref","id","show","_ref$size","size","renderHeaderAction","closeButtonTheme","closeButtonAriaLabel","_ref$onClose","onClose","anchorElementRef","alertModal","_ref$container","container","document","body","children","style","zIndex","className","dataTestId","ariaLabelledby","ariaDescribedby","portalTargetElement","usePortalTarget","modalRef","useRef","modalMergedRef","useMergeRef","containerRef","_useState","useState","_useState2","_slicedToArray","titleId","setTitleId","_useState3","_useState4","descriptionId","setDescriptionId","setTitleIdCallback","useCallback","newId","setDescriptionIdCallback","contextValue","useMemo","modalId","onBackdropClick","e","onModalKeyDown","key","keyCodes","ESCAPE","modalAnimationVariants","modalAnimationFullViewVariants","current","modalAnimationAnchorPopVariants","modalAnimationCenterPopVariants","React","createElement","AnimatePresence","LayerProvider","layerRef","ModalProvider","value","createPortal","returnFocus","styles","motion","div","variants","modalAnimationOverlayVariants","initial","animate","exit","getTestId","ComponentDefaultTestId","MODAL_NEXT_OVERLAY","overlay","onClick","RemoveScroll","forwardProps","custom","cx","modal","getStyle","camelCase","_defineProperty","withHeaderAction","MODAL_NEXT","role","onKeyDown","tabIndex","ModalTopActions","renderAction","theme"],"mappings":"4sCA2BA,IAAMA,EAAsBC,EAAUC,SAAWD,EAE3CE,EAAQC,GACZ,SAAAC,EAoBEC,GACE,IAnBAC,EAAEF,EAAFE,GACAC,EAAIH,EAAJG,KAAIC,EAAAJ,EACJK,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAkBN,EAAlBM,mBACAC,EAAgBP,EAAhBO,iBACAC,EAAoBR,EAApBQ,qBAAoBC,EAAAT,EACpBU,QAAAA,OAAO,IAAAD,EAAG,WAAQ,EAAAA,EAClBE,EAAgBX,EAAhBW,iBACAC,EAAUZ,EAAVY,WAAUC,EAAAb,EACVc,UAAAA,OAAS,IAAAD,EAAGE,SAASC,KAAIH,EACzBI,EAAQjB,EAARiB,SACAC,EAAKlB,EAALkB,MACAC,EAAMnB,EAANmB,OACAC,EAASpB,EAAToB,UACeC,EAAUrB,EAAzB,eACmBsB,EAActB,EAAjC,mBACoBuB,EAAevB,EAAnC,oBAIIwB,EAAsBC,EAAgBX,GAEtCY,EAAWC,EAAuB,MAClCC,EAAiBC,EAA4B5B,EAAKyB,GAClDI,EAAeH,EAAuB,MAE5CI,GAA8BC,IAAkBC,GAAAC,EAAAH,GAAA,GAAzCI,GAAOF,GAAA,GAAEG,GAAUH,GAAA,GAC1BI,GAA0CL,IAAkBM,GAAAJ,EAAAG,GAAA,GAArDE,GAAaD,GAAA,GAAEE,GAAgBF,GAAA,GAEhCG,GAAqBC,GACzB,SAACC,GACKrB,GACJc,GAAWO,EACb,GACA,CAACrB,IAEGsB,GAA2BF,GAC/B,SAACC,GACKpB,GACJiB,GAAiBG,EACnB,GACA,CAACpB,IAGGsB,GAAeC,GACnB,WAAA,MAAO,CACLC,QAAS7C,EACTkC,WAAYK,GACZD,iBAAkBI,GAClB,GACF,CAAC1C,EAAIuC,GAAoBG,KAGrBI,GAAkBN,GACtB,SAAAO,GACO9C,IAAQS,GACbF,EAAQuC,EACT,GACD,CAAC9C,EAAMS,EAAYF,IAGfwC,GAAiBR,GACrB,SAAAO,GACMA,EAAEE,MAAQC,EAASC,QAAWlD,IAAQS,GAC1CF,EAAQuC,EACT,GACD,CAACrC,EAAYF,EAASP,IAGlBmD,GACK,cAATjD,EACIkD,GACA5C,aAAA,EAAAA,EAAkB6C,SAClBC,EACAC,EAIN,OACEC,EAAAC,cAACC,EAAe,KACb1D,GACCwD,EAAAC,cAACE,EAAa,CAACC,SAAUjC,GACvB6B,EAACC,cAAAI,EAAc,CAAAC,MAAOpB,IACnBqB,EACCP,EAAAC,cAACjE,EAAkB,CAACwE,aAAW,GAC7BR,EAAAC,cAAA,MAAA,CAAK3D,IAAK6B,EAAcV,UAAWgD,EAAOtD,UAAWI,MAT/CC,EAAU,CAAE,yBAA0BA,GAAmC,IAU7EwC,EAAAC,cAACS,EAAOC,IACN,CAAAC,SAAUC,EACVC,QAAQ,UACRC,QAAQ,QACRC,KAAK,OACQ,cAAAC,EAAUC,EAAuBC,mBAAoB5E,GAClEkB,UAAWgD,EAAOW,QAClBC,QAAShC,GAET,eAAA,IACFW,EAAAC,cAACqB,EAAa,CAAAC,cAAa,EAAAjF,IAAK2B,GAC9B+B,EAACC,cAAAS,EAAOC,IAAG,CACTC,SAAUjB,GACVmB,QAAQ,OACRC,QAAQ,QACRC,KAAK,OACLQ,OAAQxE,EACRS,UAAWgE,EACThB,EAAOiB,MACPC,EAASlB,EAAQmB,EAAU,QAAUlF,IAAMmF,EAAA,CAAA,EACxCpB,EAAOqB,mBAAqBnF,GAC/Bc,GAEFlB,GAAIA,EAAE,cACOmB,GAAcuD,EAAUC,EAAuBa,WAAYxF,GACxEyF,KAAK,SAEY,cAAA,EAAA,kBAAArE,GAAkBa,GAAO,mBACxBZ,GAAmBgB,GACrCrB,MAAOA,EACP0E,UAAW1C,GACX2C,UAAW,GAEV5E,EACD0C,EAAAC,cAACkC,EAAe,CACdC,aAAczF,EACd0F,MAAOzF,EACPC,qBAAsBA,EACtBE,QAASA,QAMnBc,KAOd"}
@@ -1,2 +1,2 @@
1
- import t,{forwardRef as s}from"react";import{getTestId as a}from"../../../tests/testIds.js";import{ComponentDefaultTestId as e}from"../../../tests/constants.js";import{useModal as o}from"../context/ModalContext.js";var r=s((function(s,r){var d=s.children,i=s.className,m=s.id,c=s["data-testid"],n=o().autoFocus;return t.createElement("div",{ref:r,className:i,id:m,"data-testid":c||a(e.MODAL_NEXT_CONTENT,m),"data-autofocus-inside":n},d)}));export{r as default};
1
+ import t,{forwardRef as s}from"react";import{getTestId as a}from"../../../tests/testIds.js";import{ComponentDefaultTestId as e}from"../../../tests/constants.js";var r=s((function(s,r){var d=s.children,i=s.id;return t.createElement("div",{ref:r,className:s.className,id:i,"data-testid":s["data-testid"]||a(e.MODAL_NEXT_CONTENT,i),"data-autofocus-inside":!0},d)}));export{r as default};
2
2
  //# sourceMappingURL=ModalContent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modal/ModalContent/ModalContent.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { ModalContentProps } from \"./ModalContent.types\";\nimport { useModal } from \"../context/ModalContext\";\n\nconst ModalContent = forwardRef(\n (\n { children, className, id, \"data-testid\": dataTestId }: ModalContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n const { autoFocus } = useModal();\n return (\n <div\n ref={ref}\n className={className}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_CONTENT, id)}\n data-autofocus-inside={autoFocus}\n >\n {children}\n </div>\n );\n }\n);\n\nexport default ModalContent;\n"],"names":["ModalContent","forwardRef","_ref","ref","children","className","id","dataTestId","autoFocus","useModal","React","createElement","getTestId","ComponentDefaultTestId","MODAL_NEXT_CONTENT"],"mappings":"uNAMMA,IAAAA,EAAeC,GACnB,SAAAC,EAEEC,GACE,IAFAC,EAAQF,EAARE,SAAUC,EAASH,EAATG,UAAWC,EAAEJ,EAAFI,GAAmBC,EAAUL,EAAzB,eAGnBM,EAAcC,IAAdD,UACR,OACEE,EAAAC,cAAA,MAAA,CACER,IAAKA,EACLE,UAAWA,EACXC,GAAIA,EACS,cAAAC,GAAcK,EAAUC,EAAuBC,mBAAoBR,GAAG,wBAC5DE,GAEtBJ,EAGP"}
1
+ {"version":3,"file":"ModalContent.js","sources":["../../../../../src/components/Modal/ModalContent/ModalContent.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { ModalContentProps } from \"./ModalContent.types\";\n\nconst ModalContent = forwardRef(\n (\n { children, className, id, \"data-testid\": dataTestId }: ModalContentProps,\n ref: React.ForwardedRef<HTMLDivElement>\n ) => {\n return (\n <div\n ref={ref}\n className={className}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_CONTENT, id)}\n data-autofocus-inside={true}\n >\n {children}\n </div>\n );\n }\n);\n\nexport default ModalContent;\n"],"names":["ModalContent","forwardRef","_ref","ref","children","id","React","createElement","className","getTestId","ComponentDefaultTestId","MODAL_NEXT_CONTENT"],"mappings":"iKAKMA,IAAAA,EAAeC,GACnB,SAAAC,EAEEC,GACE,IAFAC,EAAQF,EAARE,SAAqBC,EAAEH,EAAFG,GAGvB,OACEC,EAAAC,cAAA,MAAA,CACEJ,IAAKA,EACLK,UANiBN,EAATM,UAORH,GAAIA,EACS,cARmCH,EAAzB,gBAQIO,EAAUC,EAAuBC,mBAAoBN,GAAG,yBAC5D,GAEtBD,EAGP"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as t,useRef as o,useMemo as r}from"react";import{BASE_SIZES as a}from"../../constants/sizes.js";import s from"../../hooks/useMergeRef.js";import{NOOP as l}from"../../utils/function-utils.js";import{ensureDefaultValue as d}from"./SliderHelpers.js";import{SliderProvider as n}from"./SliderContext.js";import m from"./SliderBase/SliderBase.js";import u from"./SliderInfix.js";import{SliderColor as c}from"./SliderConstants.js";import p from"classnames";import{withStaticProps as f}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import v from"./Slider.module.scss.js";var x=f(t((function(t,a){var c=t.ariaLabel,f=t.ariaLabelledby,x=t.className,j=t.color,S=t["data-testid"],b=void 0===S?"monday-slider":S,h=t.disabled,g=void 0!==h&&h,E=t.id,k=t.max,y=void 0===k?100:k,I=t.min,P=void 0===I?0:I,w=t.onChange,z=void 0===w?l:w,C=t.ranged,F=void 0!==C&&C,L=t.step,V=void 0===L?1:L,B=t.showValue,T=void 0!==B&&B,H=t.size,N=void 0===H?"small":H,O=t.value,R=t.defaultValue,W=void 0===R?0:R,X=t.valueFormatter,_=void 0===X?function(e){return"".concat(e,"%")}:X,M=t.valueText,q=t.indicateSelection,A=void 0!==q&&q,D=t.prefix,G=t.postfix,J=t.selectionIndicatorWidth,K=void 0===J?"60px":J,Q=o(null),U=s(a,Q),Y=r((function(){return{prefix:D,postfix:G,indicateSelection:A,selectionIndicatorWidth:K}}),[D,G,A,K]);return i.createElement(n,{ariaLabel:c,ariaLabelledby:f,color:j,"data-testid":b,disabled:g,infixOptions:Y,max:y,min:P,onChange:z,ranged:F,showValue:T,size:N,step:V,value:O,defaultValue:d(W,P,y,F),valueFormatter:_,valueText:M},i.createElement("div",{className:p(v.slider,e({},v.valueShown,T),x),"data-testid":b,id:E,ref:U},i.createElement(u,{kind:u.kinds.PREFIX}),i.createElement(m,null),i.createElement(u,{kind:u.kinds.POSTFIX})))})),{sizes:a,colors:c});export{x as default};
1
+ import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as o,useRef as t,useMemo as a}from"react";import{BASE_SIZES as r}from"../../constants/sizes.js";import l from"../../hooks/useMergeRef.js";import{NOOP as s}from"../../utils/function-utils.js";import{ensureDefaultValue as d}from"./SliderHelpers.js";import{SliderProvider as n}from"./SliderContext.js";import m from"./SliderBase/SliderBase.js";import u from"./SliderInfix.js";import{SliderColor as p}from"./SliderConstants.js";import v from"classnames";import{withStaticProps as c}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import f from"./Slider.module.scss.js";var b=c(o((function(o,r){var p=o.ariaLabel,c=o.ariaLabelledby,b=o.className,x=o.color,j=o["data-testid"],S=void 0===j?"monday-slider":j,h=o.disabled,L=void 0!==h&&h,P=o.id,g=o.max,y=void 0===g?100:g,C=o.min,E=void 0===C?0:C,k=o.onChange,I=void 0===k?s:k,w=o.ranged,z=void 0!==w&&w,F=o.step,V=void 0===F?1:F,B=o.showValue,T=void 0!==B&&B,H=o.valueLabelPosition,N=void 0===H?"top":H,O=o.valueLabelColor,R=void 0===O?"primary":O,W=o.size,X=void 0===W?"small":W,_=o.value,M=o.defaultValue,q=void 0===M?0:M,A=o.valueFormatter,D=void 0===A?function(e){return"".concat(e,"%")}:A,G=o.valueText,J=o.indicateSelection,K=void 0!==J&&J,Q=o.prefix,U=o.postfix,Y=o.selectionIndicatorWidth,Z=void 0===Y?"60px":Y,$=t(null),ee=l(r,$),ie=a((function(){return{prefix:Q,postfix:U,indicateSelection:K,selectionIndicatorWidth:Z}}),[Q,U,K,Z]);return i.createElement(n,{ariaLabel:p,ariaLabelledby:c,color:x,"data-testid":S,disabled:L,infixOptions:ie,max:y,min:E,onChange:I,ranged:z,showValue:T,valueLabelPosition:N,valueLabelColor:R,size:X,step:V,value:_,defaultValue:d(q,E,y,z),valueFormatter:D,valueText:G},i.createElement("div",{className:v(f.slider,e({},f.valueShown,T),b),"data-testid":S,id:P,ref:ee},i.createElement(u,{kind:u.kinds.PREFIX}),i.createElement(m,null),i.createElement(u,{kind:u.kinds.POSTFIX})))})),{sizes:r,colors:p});export{b as default};
2
2
  //# sourceMappingURL=Slider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo, useRef } from \"react\";\nimport { BASE_SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ensureDefaultValue } from \"./SliderHelpers\";\nimport { SliderProvider } from \"./SliderContext\";\nimport SliderBase from \"./SliderBase/SliderBase\";\nimport SliderInfix from \"./SliderInfix\";\nimport { IconType } from \"../Icon\";\nimport { SliderColor as SliderColorEnum } from \"./SliderConstants\";\nimport cx from \"classnames\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Slider.module.scss\";\nimport { SliderColor, SliderSize } from \"./Slider.types\";\n\nexport type SliderProps = {\n /**\n * Define a string that labels the current element (Slider)\n */\n ariaLabel?: string;\n /**\n * ElementId of Node that have the text needed for labeling the current element (Slider)\n */\n ariaLabelledby?: string;\n /**\n * Custom `class name` to be added to the component-root-node\n */\n className?: string;\n /**\n * Color Mode (primary/positive/negative) of the component (Slider)\n */\n color?: SliderColor;\n /**\n * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\n */\n \"data-testid\"?: string;\n defaultValue?: number | number[];\n /**\n * Formatter function `value => formattedValue`\n * default formatter return `${value}%`\n */\n /**\n * If set to true, Component (Slider) will be disabled\n * - impossible to change value of component (Slider)\n * - visual changes (opacity)\n */\n disabled?: boolean;\n /**\n * Attribute `id` to be added to the component-root-node\n */\n id?: string;\n /**\n * Max range value of the component (Slider)\n */\n max?: number;\n /**\n * Min range value of the component (Slider)\n */\n min?: number;\n /**\n * Optional onChange callback (for outer trigger or Controlled mode)\n * - required in Controlled Mode\n */\n onChange?: (value: number | number[]) => void;\n /**\n * If true switch slider to RRange mode (two Thumbs)\n */\n ranged?: boolean;\n /**\n * The granularity with which the slider can step through values.\n * (A \"discrete\" slider.) The min prop serves as the origin for the valid values.\n * We recommend (max - min) to be evenly divisible by the step.\n */\n step?: number;\n /**\n * Always show `value` instead of Tooltip\n */\n showValue?: boolean;\n /**\n * Size small/medium/large of the component (Slider)\n */\n size?: SliderSize;\n /**\n * Current/selected value of the range of the Component (Slider)\n * - should be used in Controlled Mode only\n * - in ranged mode should be an array of two numbers\n */\n value?: number | number[];\n /**\n * Function to format the value, e.g. add %. By default, returns `${value}%`\n */\n valueFormatter?: (value: number) => string;\n /**\n * Text/presentation of current/selected value\n * - should be used in Controlled Mode only\n */\n valueText?: string;\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n};\n\nconst Slider: React.FC<SliderProps> & {\n sizes?: typeof BASE_SIZES;\n colors?: typeof SliderColorEnum;\n} = forwardRef(\n (\n {\n ariaLabel,\n ariaLabelledby,\n className,\n color,\n \"data-testid\": dataTestId = \"monday-slider\",\n disabled = false,\n id,\n max = 100,\n min = 0,\n onChange = NOOP,\n ranged = false,\n step = 1,\n showValue = false,\n size = \"small\",\n value,\n defaultValue = 0,\n valueFormatter = (value: number) => `${value}%`,\n valueText,\n indicateSelection = false,\n prefix,\n postfix,\n selectionIndicatorWidth = \"60px\"\n }: SliderProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const infixOptions = useMemo(\n () => ({ prefix, postfix, indicateSelection, selectionIndicatorWidth }),\n [prefix, postfix, indicateSelection, selectionIndicatorWidth]\n );\n return (\n <SliderProvider\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n color={color}\n data-testid={dataTestId}\n disabled={disabled}\n infixOptions={infixOptions}\n max={max}\n min={min}\n onChange={onChange}\n ranged={ranged}\n showValue={showValue}\n size={size}\n step={step}\n value={value}\n defaultValue={ensureDefaultValue(defaultValue, min, max, ranged)}\n valueFormatter={valueFormatter}\n valueText={valueText}\n >\n <div\n className={cx(styles.slider, { [styles.valueShown]: showValue }, className)}\n data-testid={dataTestId}\n id={id}\n ref={mergedRef}\n >\n <SliderInfix kind={SliderInfix.kinds.PREFIX} />\n <SliderBase />\n <SliderInfix kind={SliderInfix.kinds.POSTFIX} />\n </div>\n </SliderProvider>\n );\n }\n);\n\nexport default withStaticProps(Slider, {\n sizes: BASE_SIZES,\n colors: SliderColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","ariaLabel","ariaLabelledby","className","color","_ref$dataTestid","dataTestId","_ref$disabled","disabled","id","_ref$max","max","_ref$min","min","_ref$onChange","onChange","NOOP","_ref$ranged","ranged","_ref$step","step","_ref$showValue","showValue","_ref$size","size","value","_ref$defaultValue","defaultValue","_ref$valueFormatter","valueFormatter","concat","valueText","_ref$indicateSelectio","indicateSelection","prefix","postfix","_ref$selectionIndicat","selectionIndicatorWidth","componentRef","useRef","mergedRef","useMergeRef","infixOptions","useMemo","React","createElement","SliderProvider","ensureDefaultValue","cx","styles","slider","_defineProperty","valueShown","SliderInfix","kind","kinds","PREFIX","SliderBase","POSTFIX","sizes","BASE_SIZES","colors","SliderColorEnum"],"mappings":"srBAuHA,IAwEeA,EAAAA,EArEXC,GACF,SAAAC,EAyBEC,GACE,IAxBAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAASJ,EAATI,UACAC,EAAKL,EAALK,MAAKC,EAAAN,EACL,eAAeO,OAAa,IAAHD,EAAG,gBAAeA,EAAAE,EAAAR,EAC3CS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAEV,EAAFU,GAAEC,EAAAX,EACFY,IAAAA,OAAM,IAAHD,EAAG,IAAGA,EAAAE,EAAAb,EACTc,IAAAA,OAAM,IAAHD,EAAG,EAACA,EAAAE,EAAAf,EACPgB,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACfmB,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAApB,EACdqB,KAAAA,OAAO,IAAHD,EAAG,EAACA,EAAAE,EAAAtB,EACRuB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAAxB,EACjByB,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAK1B,EAAL0B,MAAKC,EAAA3B,EACL4B,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAA7B,EAChB8B,eAAAA,OAAiB,IAAHD,EAAG,SAACH,GAAa,MAAAK,GAAAA,OAAQL,EAAK,IAAA,EAAGG,EAC/CG,EAAShC,EAATgC,UAASC,EAAAjC,EACTkC,kBAAAA,OAAoB,IAAHD,GAAQA,EACzBE,EAAMnC,EAANmC,OACAC,EAAOpC,EAAPoC,QAAOC,EAAArC,EACPsC,wBAAAA,OAA0B,IAAHD,EAAG,OAAMA,EAI5BE,EAAeC,EAAO,MACtBC,EAAYC,EAAYzC,EAAKsC,GAC7BI,EAAeC,GACnB,WAAA,MAAO,CAAET,OAAAA,EAAQC,QAAAA,EAASF,kBAAAA,EAAmBI,wBAAAA,EAA0B,GACvE,CAACH,EAAQC,EAASF,EAAmBI,IAEvC,OACEO,EAACC,cAAAC,EACC,CAAA7C,UAAWA,EACXC,eAAgBA,EAChBE,MAAOA,gBACME,EACbE,SAAUA,EACVkC,aAAcA,EACd/B,IAAKA,EACLE,IAAKA,EACLE,SAAUA,EACVG,OAAQA,EACRI,UAAWA,EACXE,KAAMA,EACNJ,KAAMA,EACNK,MAAOA,EACPE,aAAcoB,EAAmBpB,EAAcd,EAAKF,EAAKO,GACzDW,eAAgBA,EAChBE,UAAWA,GAEXa,EAAAC,cAAA,MAAA,CACE1C,UAAW6C,EAAGC,EAAOC,OAAMC,EAAKF,GAAAA,EAAOG,WAAa9B,GAAanB,GACpD,cAAAG,EACbG,GAAIA,EACJT,IAAKwC,GAELI,EAACC,cAAAQ,GAAYC,KAAMD,EAAYE,MAAMC,SACrCZ,EAAAC,cAACY,EAAa,MACdb,EAAAC,cAACQ,EAAW,CAACC,KAAMD,EAAYE,MAAMG,WAI7C,IAGqC,CACrCC,MAAOC,EACPC,OAAQC"}
1
+ {"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo, useRef } from \"react\";\nimport { BASE_SIZES } from \"../../constants\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { ensureDefaultValue } from \"./SliderHelpers\";\nimport { SliderProvider } from \"./SliderContext\";\nimport SliderBase from \"./SliderBase/SliderBase\";\nimport SliderInfix from \"./SliderInfix\";\nimport { IconType } from \"../Icon\";\nimport { SliderColor as SliderColorEnum } from \"./SliderConstants\";\nimport cx from \"classnames\";\nimport { withStaticProps } from \"../../types\";\nimport styles from \"./Slider.module.scss\";\nimport { SliderColor, SliderLabelColor, SliderLabelPosition, SliderSize } from \"./Slider.types\";\n\nexport type SliderProps = {\n /**\n * Define a string that labels the current element (Slider)\n */\n ariaLabel?: string;\n /**\n * ElementId of Node that have the text needed for labeling the current element (Slider)\n */\n ariaLabelledby?: string;\n /**\n * Custom `class name` to be added to the component-root-node\n */\n className?: string;\n /**\n * Color Mode (primary/positive/negative) of the component (Slider)\n */\n color?: SliderColor;\n /**\n * Unique TestId - can be used as Selector for integration tests and other needs (tracking, etc)\n */\n \"data-testid\"?: string;\n defaultValue?: number | number[];\n /**\n * Formatter function `value => formattedValue`\n * default formatter return `${value}%`\n */\n /**\n * If set to true, Component (Slider) will be disabled\n * - impossible to change value of component (Slider)\n * - visual changes (opacity)\n */\n disabled?: boolean;\n /**\n * Attribute `id` to be added to the component-root-node\n */\n id?: string;\n /**\n * Max range value of the component (Slider)\n */\n max?: number;\n /**\n * Min range value of the component (Slider)\n */\n min?: number;\n /**\n * Optional onChange callback (for outer trigger or Controlled mode)\n * - required in Controlled Mode\n */\n onChange?: (value: number | number[]) => void;\n /**\n * If true switch slider to RRange mode (two Thumbs)\n */\n ranged?: boolean;\n /**\n * The granularity with which the slider can step through values.\n * (A \"discrete\" slider.) The min prop serves as the origin for the valid values.\n * We recommend (max - min) to be evenly divisible by the step.\n */\n step?: number;\n /**\n * Always show `value` instead of Tooltip\n */\n showValue?: boolean;\n /**\n * Position of the `value` when `showValue` is true\n */\n valueLabelPosition?: SliderLabelPosition;\n /**\n * Color of the `value` when `showValue` is true\n */\n valueLabelColor?: SliderLabelColor;\n /**\n * Size small/medium/large of the component (Slider)\n */\n size?: SliderSize;\n /**\n * Current/selected value of the range of the Component (Slider)\n * - should be used in Controlled Mode only\n * - in ranged mode should be an array of two numbers\n */\n value?: number | number[];\n /**\n * Function to format the value, e.g. add %. By default, returns `${value}%`\n */\n valueFormatter?: (value: number) => string;\n /**\n * Text/presentation of current/selected value\n * - should be used in Controlled Mode only\n */\n valueText?: string;\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n};\n\nconst Slider: React.FC<SliderProps> & {\n sizes?: typeof BASE_SIZES;\n colors?: typeof SliderColorEnum;\n} = forwardRef(\n (\n {\n ariaLabel,\n ariaLabelledby,\n className,\n color,\n \"data-testid\": dataTestId = \"monday-slider\",\n disabled = false,\n id,\n max = 100,\n min = 0,\n onChange = NOOP,\n ranged = false,\n step = 1,\n showValue = false,\n valueLabelPosition = \"top\",\n valueLabelColor = \"primary\",\n size = \"small\",\n value,\n defaultValue = 0,\n valueFormatter = (value: number) => `${value}%`,\n valueText,\n indicateSelection = false,\n prefix,\n postfix,\n selectionIndicatorWidth = \"60px\"\n }: SliderProps,\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n const infixOptions = useMemo(\n () => ({ prefix, postfix, indicateSelection, selectionIndicatorWidth }),\n [prefix, postfix, indicateSelection, selectionIndicatorWidth]\n );\n return (\n <SliderProvider\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n color={color}\n data-testid={dataTestId}\n disabled={disabled}\n infixOptions={infixOptions}\n max={max}\n min={min}\n onChange={onChange}\n ranged={ranged}\n showValue={showValue}\n valueLabelPosition={valueLabelPosition}\n valueLabelColor={valueLabelColor}\n size={size}\n step={step}\n value={value}\n defaultValue={ensureDefaultValue(defaultValue, min, max, ranged)}\n valueFormatter={valueFormatter}\n valueText={valueText}\n >\n <div\n className={cx(styles.slider, { [styles.valueShown]: showValue }, className)}\n data-testid={dataTestId}\n id={id}\n ref={mergedRef}\n >\n <SliderInfix kind={SliderInfix.kinds.PREFIX} />\n <SliderBase />\n <SliderInfix kind={SliderInfix.kinds.POSTFIX} />\n </div>\n </SliderProvider>\n );\n }\n);\n\nexport default withStaticProps(Slider, {\n sizes: BASE_SIZES,\n colors: SliderColorEnum\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","ariaLabel","ariaLabelledby","className","color","_ref$dataTestid","dataTestId","_ref$disabled","disabled","id","_ref$max","max","_ref$min","min","_ref$onChange","onChange","NOOP","_ref$ranged","ranged","_ref$step","step","_ref$showValue","showValue","_ref$valueLabelPositi","valueLabelPosition","_ref$valueLabelColor","valueLabelColor","_ref$size","size","value","_ref$defaultValue","defaultValue","_ref$valueFormatter","valueFormatter","concat","valueText","_ref$indicateSelectio","indicateSelection","prefix","postfix","_ref$selectionIndicat","selectionIndicatorWidth","componentRef","useRef","mergedRef","useMergeRef","infixOptions","useMemo","React","createElement","SliderProvider","ensureDefaultValue","cx","styles","slider","_defineProperty","valueShown","SliderInfix","kind","kinds","PREFIX","SliderBase","POSTFIX","sizes","BASE_SIZES","colors","SliderColorEnum"],"mappings":"srBA+HA,IA4EeA,EAAAA,EAzEXC,GACF,SAAAC,EA2BEC,GACE,IA1BAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAASJ,EAATI,UACAC,EAAKL,EAALK,MAAKC,EAAAN,EACL,eAAeO,OAAa,IAAHD,EAAG,gBAAeA,EAAAE,EAAAR,EAC3CS,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAEV,EAAFU,GAAEC,EAAAX,EACFY,IAAAA,OAAM,IAAHD,EAAG,IAAGA,EAAAE,EAAAb,EACTc,IAAAA,OAAM,IAAHD,EAAG,EAACA,EAAAE,EAAAf,EACPgB,SAAAA,OAAWC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAlB,EACfmB,OAAAA,OAAS,IAAHD,GAAQA,EAAAE,EAAApB,EACdqB,KAAAA,OAAO,IAAHD,EAAG,EAACA,EAAAE,EAAAtB,EACRuB,UAAAA,OAAY,IAAHD,GAAQA,EAAAE,EAAAxB,EACjByB,mBAAAA,OAAqB,IAAHD,EAAG,MAAKA,EAAAE,EAAA1B,EAC1B2B,gBAAAA,OAAkB,IAAHD,EAAG,UAASA,EAAAE,EAAA5B,EAC3B6B,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAK9B,EAAL8B,MAAKC,EAAA/B,EACLgC,aAAAA,OAAe,IAAHD,EAAG,EAACA,EAAAE,EAAAjC,EAChBkC,eAAAA,OAAiB,IAAHD,EAAG,SAACH,GAAa,MAAAK,GAAAA,OAAQL,EAAK,IAAA,EAAGG,EAC/CG,EAASpC,EAAToC,UAASC,EAAArC,EACTsC,kBAAAA,OAAoB,IAAHD,GAAQA,EACzBE,EAAMvC,EAANuC,OACAC,EAAOxC,EAAPwC,QAAOC,EAAAzC,EACP0C,wBAAAA,OAA0B,IAAHD,EAAG,OAAMA,EAI5BE,EAAeC,EAAO,MACtBC,GAAYC,EAAY7C,EAAK0C,GAC7BI,GAAeC,GACnB,WAAA,MAAO,CAAET,OAAAA,EAAQC,QAAAA,EAASF,kBAAAA,EAAmBI,wBAAAA,EAA0B,GACvE,CAACH,EAAQC,EAASF,EAAmBI,IAEvC,OACEO,EAACC,cAAAC,GACCjD,UAAWA,EACXC,eAAgBA,EAChBE,MAAOA,EACM,cAAAE,EACbE,SAAUA,EACVsC,aAAcA,GACdnC,IAAKA,EACLE,IAAKA,EACLE,SAAUA,EACVG,OAAQA,EACRI,UAAWA,EACXE,mBAAoBA,EACpBE,gBAAiBA,EACjBE,KAAMA,EACNR,KAAMA,EACNS,MAAOA,EACPE,aAAcoB,EAAmBpB,EAAclB,EAAKF,EAAKO,GACzDe,eAAgBA,EAChBE,UAAWA,GAEXa,EAAAC,cAAA,MAAA,CACE9C,UAAWiD,EAAGC,EAAOC,OAAMC,EAAKF,GAAAA,EAAOG,WAAalC,GAAanB,GACpD,cAAAG,EACbG,GAAIA,EACJT,IAAK4C,IAELI,EAACC,cAAAQ,GAAYC,KAAMD,EAAYE,MAAMC,SACrCZ,EAAAC,cAACY,EAAa,MACdb,EAAAC,cAACQ,EAAW,CAACC,KAAMD,EAAYE,MAAMG,WAI7C,IAGqC,CACrCC,MAAOC,EACPC,OAAQC"}
@@ -1,2 +1,2 @@
1
- import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useEffect as a}from"react";import{NOOP as n}from"../../../utils/function-utils.js";import r from"../../Tooltip/Tooltip.js";import{TOOLTIP_SHOW_DELAY as i}from"../SliderConstants.js";import{useSliderSelection as l,useSliderUi as s,useSliderActions as u}from"../SliderContext.js";import d from"classnames";import m from"./SliderThumb.module.scss.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";var p=function(p){var f=p.className,v=p.index,b=void 0===v?0:v,g=p.onMove,h=void 0===g?n:g,x=p.position,y=void 0===x?0:x,j=p.size,E=p.color,L=l(),T=L.max,w=L.min,D=L.ranged,P=L.value,S=L.valueText,B=D?P[b]:P,C=D?S[b]:S,H=s(),N=H.active,F=H.ariaLabel,I=H.ariaLabelledby,M=H.disabled,_=H.dragging,z=H.focused,A=H.shapeTestId,K=H.showValue,V=u(),k=V.setActive,q=V.setFocused,G=V.setDragging,J=t(null);function O(){G(null),document.removeEventListener("pointermove",h),document.removeEventListener("pointerup",O)}return a((function(){z===b&&J&&J.current&&J.current.focus()}),[z,b]),o.createElement(r,{open:N===b||_===b,content:K?null:C,position:"top",showDelay:i,addKeyboardHideShowTriggersByDefault:!1},o.createElement("div",{"aria-label":F,"aria-labelledby":I,"aria-valuemax":T,"aria-valuemin":w,"aria-valuenow":B,"aria-valuetext":C,"aria-disabled":M,className:d(m.thumb,c(m,E),c(m,j),e(e(e({},m.dragging,_===b),m.focused,z),m.notDisabledThumb,!M),f),"data-testid":A("thumb-".concat(b)),onFocus:function(){q(b),k(b)},onBlur:function(){q(null),k(null)},onPointerDown:function(e){e.stopPropagation(),G(b),document.addEventListener("pointermove",h),document.addEventListener("pointerup",O)},onPointerLeave:function(){k(null)},ref:J,role:"slider",style:{left:"".concat(y,"%")},tabIndex:M?-1:0},K&&o.createElement("label",{className:m.label},C)))};export{p as default};
1
+ import{defineProperty as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useRef as t,useEffect as a}from"react";import{NOOP as r}from"../../../utils/function-utils.js";import n from"../../Tooltip/Tooltip.js";import{TOOLTIP_SHOW_DELAY as i}from"../SliderConstants.js";import{useSliderSelection as l,useSliderUi as s,useSliderActions as u}from"../SliderContext.js";import m from"classnames";import d from"./SliderThumb.module.scss.js";import{getStyle as c}from"../../../helpers/typesciptCssModulesHelper.js";import{camelCase as p}from"lodash-es";var v=function(v){var f=v.className,b=v.index,g=void 0===b?0:b,h=v.onMove,L=void 0===h?r:h,x=v.position,y=void 0===x?0:x,j=v.size,E=v.color,T=l(),P=T.max,w=T.min,D=T.ranged,C=T.value,S=T.valueText,B=D?C[g]:C,H=D?S[g]:S,N=s(),F=N.active,I=N.ariaLabel,M=N.ariaLabelledby,_=N.disabled,z=N.dragging,A=N.focused,K=N.shapeTestId,V=N.showValue,k=N.valueLabelPosition,q=N.valueLabelColor,G=u(),J=G.setActive,O=G.setFocused,Q=G.setDragging,R=t(null);function U(){Q(null),document.removeEventListener("pointermove",L),document.removeEventListener("pointerup",U)}return a((function(){A===g&&R&&R.current&&R.current.focus()}),[A,g]),o.createElement(n,{open:F===g||z===g,content:V?null:H,position:"top",showDelay:i,addKeyboardHideShowTriggersByDefault:!1},o.createElement("div",{"aria-label":I,"aria-labelledby":M,"aria-valuemax":P,"aria-valuemin":w,"aria-valuenow":B,"aria-valuetext":H,"aria-disabled":_,className:m(d.thumb,c(d,E),c(d,j),e(e(e({},d.dragging,z===g),d.focused,A),d.notDisabledThumb,!_),f),"data-testid":K("thumb-".concat(g)),onFocus:function(){O(g),J(g)},onBlur:function(){O(null),J(null)},onPointerDown:function(e){e.stopPropagation(),Q(g),document.addEventListener("pointermove",L),document.addEventListener("pointerup",U)},onPointerLeave:function(){J(null)},ref:R,role:"slider",style:{left:"".concat(y,"%")},tabIndex:_?-1:0},V&&o.createElement("label",{className:m(d.label,c(d,p("color-"+q)),c(d,p("position-"+k)))},H)))};export{v as default};
2
2
  //# sourceMappingURL=SliderThumb.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderThumb.js","sources":["../../../../../src/components/Slider/SliderBase/SliderThumb.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef } from \"react\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport Tooltip from \"../../Tooltip/Tooltip\";\nimport { TOOLTIP_SHOW_DELAY } from \"../SliderConstants\";\nimport { useSliderActions, useSliderSelection, useSliderUi } from \"../SliderContext\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport styles from \"./SliderThumb.module.scss\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { SliderColor, SliderSize } from \"../Slider.types\";\n\nexport interface SliderThumbProps extends VibeComponentProps {\n /**\n * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\n */\n className?: string;\n /**\n * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\n */\n index?: number;\n /**\n * On SliderThumb move callback\n */\n onMove?: (event: PointerEvent) => void;\n /**\n * Position (i.e. offset) from start of track/rail, according to value\n */\n position?: number;\n size: SliderSize;\n color: SliderColor;\n}\n\nconst SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP, position = 0, size, color }) => {\n const { max, min, ranged, value: valueOrValues, valueText: valueOrValuesText } = useSliderSelection();\n const value = ranged ? (valueOrValues as unknown as number[])[index] : (valueOrValues as number);\n const valueText = ranged ? (valueOrValuesText as unknown as string[])[index] : (valueOrValuesText as string);\n const { active, ariaLabel, ariaLabelledby, disabled, dragging, focused, shapeTestId, showValue } = useSliderUi();\n const { setActive, setFocused, setDragging } = useSliderActions();\n const ref = useRef(null);\n\n function handleBlur() {\n setFocused(null);\n setActive(null);\n }\n\n function handleFocus() {\n setFocused(index);\n setActive(index);\n }\n\n function handlePointerLeave() {\n setActive(null);\n }\n\n function handlePointerDown(e: React.PointerEvent) {\n e.stopPropagation();\n setDragging(index);\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", stopMove);\n }\n\n function stopMove() {\n setDragging(null);\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", stopMove);\n }\n\n useEffect(() => {\n if (focused === index && ref && ref.current) {\n ref.current.focus();\n }\n }, [focused, index]);\n\n return (\n <Tooltip\n open={active === index || dragging === index}\n content={showValue ? null : valueText}\n position=\"top\"\n showDelay={TOOLTIP_SHOW_DELAY}\n addKeyboardHideShowTriggersByDefault={false}\n >\n <div\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n className={cx(\n styles.thumb,\n getStyle(styles, color),\n getStyle(styles, size),\n {\n [styles.dragging]: dragging === index,\n [styles.focused]: focused,\n [styles.notDisabledThumb]: !disabled\n },\n className\n )}\n data-testid={shapeTestId(`thumb-${index}`)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerLeave}\n ref={ref}\n role=\"slider\"\n style={{ left: `${position}%` }}\n tabIndex={disabled ? -1 : 0}\n >\n {showValue && <label className={styles.label}>{valueText}</label>}\n </div>\n </Tooltip>\n );\n};\n\nexport default SliderThumb;\n"],"names":["SliderThumb","_ref","className","_ref$index","index","_ref$onMove","onMove","NOOP","_ref$position","position","size","color","_useSliderSelection","useSliderSelection","max","min","ranged","valueOrValues","value","valueOrValuesText","valueText","_useSliderUi","useSliderUi","active","ariaLabel","ariaLabelledby","disabled","dragging","focused","shapeTestId","showValue","_useSliderActions","useSliderActions","setActive","setFocused","setDragging","ref","useRef","stopMove","document","removeEventListener","useEffect","current","focus","React","createElement","Tooltip","open","content","showDelay","TOOLTIP_SHOW_DELAY","addKeyboardHideShowTriggersByDefault","cx","styles","thumb","getStyle","_defineProperty","notDisabledThumb","concat","onFocus","onBlur","onPointerDown","e","stopPropagation","addEventListener","onPointerLeave","role","style","left","tabIndex","label"],"mappings":"8gBAgCA,IAAMA,EAAoC,SAAzBC,GAAgG,IAApEC,EAASD,EAATC,UAASC,EAAAF,EAAEG,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAJ,EAAEK,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAAEQ,SAAAA,OAAW,IAAHD,EAAG,EAACA,EAAEE,EAAIT,EAAJS,KAAMC,EAAKV,EAALU,MACpGC,EAAiFC,IAAzEC,EAAGF,EAAHE,IAAKC,EAAGH,EAAHG,IAAKC,EAAMJ,EAANI,OAAeC,EAAaL,EAApBM,MAAiCC,EAAiBP,EAA5BQ,UAC1CF,EAAQF,EAAUC,EAAsCb,GAAUa,EAClEG,EAAYJ,EAAUG,EAA0Cf,GAAUe,EAChFE,EAAmGC,IAA3FC,EAAMF,EAANE,OAAQC,EAASH,EAATG,UAAWC,EAAcJ,EAAdI,eAAgBC,EAAQL,EAARK,SAAUC,EAAQN,EAARM,SAAUC,EAAOP,EAAPO,QAASC,EAAWR,EAAXQ,YAAaC,EAAST,EAATS,UACrFC,EAA+CC,IAAvCC,EAASF,EAATE,UAAWC,EAAUH,EAAVG,WAAYC,EAAWJ,EAAXI,YACzBC,EAAMC,EAAO,MAuBnB,SAASC,IACPH,EAAY,MACZI,SAASC,oBAAoB,cAAelC,GAC5CiC,SAASC,oBAAoB,YAAaF,EAC5C,CAQA,OANAG,GAAU,WACJb,IAAYxB,GAASgC,GAAOA,EAAIM,SAClCN,EAAIM,QAAQC,OAEhB,GAAG,CAACf,EAASxB,IAGXwC,EAACC,cAAAC,EACC,CAAAC,KAAMxB,IAAWnB,GAASuB,IAAavB,EACvC4C,QAASlB,EAAY,KAAOV,EAC5BX,SAAS,MACTwC,UAAWC,EACXC,sCAAsC,GAEtCP,EAAAC,cAAA,MAAA,CAAA,aACcrB,EAAS,kBACJC,EAAc,gBAChBX,EACA,gBAAAC,EACA,gBAAAG,mBACCE,EAAS,gBACVM,EACfxB,UAAWkD,EACTC,EAAOC,MACPC,EAASF,EAAQ1C,GACjB4C,EAASF,EAAQ3C,GAAK8C,EAAAA,EAAAA,EAAA,CAAA,EAEnBH,EAAO1B,SAAWA,IAAavB,GAC/BiD,EAAOzB,QAAUA,GACjByB,EAAOI,kBAAoB/B,GAE9BxB,GAEW,cAAA2B,EAAW,SAAA6B,OAAUtD,IAClCuD,QAxDN,WACEzB,EAAW9B,GACX6B,EAAU7B,EACZ,EAsDMwD,OA9DN,WACE1B,EAAW,MACXD,EAAU,KACZ,EA4DM4B,cAjDN,SAA2BC,GACzBA,EAAEC,kBACF5B,EAAY/B,GACZmC,SAASyB,iBAAiB,cAAe1D,GACzCiC,SAASyB,iBAAiB,YAAa1B,EACzC,EA6CM2B,eAtDN,WACEhC,EAAU,KACZ,EAqDMG,IAAKA,EACL8B,KAAK,SACLC,MAAO,CAAEC,KAAI,GAAAV,OAAKjD,EAAQ,MAC1B4D,SAAU3C,GAAY,EAAI,GAEzBI,GAAac,EAAAC,cAAA,QAAA,CAAO3C,UAAWmD,EAAOiB,OAAQlD,IAIvD"}
1
+ {"version":3,"file":"SliderThumb.js","sources":["../../../../../src/components/Slider/SliderBase/SliderThumb.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef } from \"react\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport Tooltip from \"../../Tooltip/Tooltip\";\nimport { TOOLTIP_SHOW_DELAY } from \"../SliderConstants\";\nimport { useSliderActions, useSliderSelection, useSliderUi } from \"../SliderContext\";\nimport VibeComponentProps from \"../../../types/VibeComponentProps\";\nimport cx from \"classnames\";\nimport styles from \"./SliderThumb.module.scss\";\nimport { getStyle } from \"../../../helpers/typesciptCssModulesHelper\";\nimport { SliderColor, SliderSize } from \"../Slider.types\";\nimport { camelCase } from \"lodash-es\";\n\nexport interface SliderThumbProps extends VibeComponentProps {\n /**\n * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\n */\n className?: string;\n /**\n * Consumer/Custom/Extra `class names` to be added to the Component's-Root-Node\n */\n index?: number;\n /**\n * On SliderThumb move callback\n */\n onMove?: (event: PointerEvent) => void;\n /**\n * Position (i.e. offset) from start of track/rail, according to value\n */\n position?: number;\n size: SliderSize;\n color: SliderColor;\n}\n\nconst SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP, position = 0, size, color }) => {\n const { max, min, ranged, value: valueOrValues, valueText: valueOrValuesText } = useSliderSelection();\n const value = ranged ? (valueOrValues as unknown as number[])[index] : (valueOrValues as number);\n const valueText = ranged ? (valueOrValuesText as unknown as string[])[index] : (valueOrValuesText as string);\n const {\n active,\n ariaLabel,\n ariaLabelledby,\n disabled,\n dragging,\n focused,\n shapeTestId,\n showValue,\n valueLabelPosition,\n valueLabelColor\n } = useSliderUi();\n const { setActive, setFocused, setDragging } = useSliderActions();\n const ref = useRef(null);\n\n function handleBlur() {\n setFocused(null);\n setActive(null);\n }\n\n function handleFocus() {\n setFocused(index);\n setActive(index);\n }\n\n function handlePointerLeave() {\n setActive(null);\n }\n\n function handlePointerDown(e: React.PointerEvent) {\n e.stopPropagation();\n setDragging(index);\n document.addEventListener(\"pointermove\", onMove);\n document.addEventListener(\"pointerup\", stopMove);\n }\n\n function stopMove() {\n setDragging(null);\n document.removeEventListener(\"pointermove\", onMove);\n document.removeEventListener(\"pointerup\", stopMove);\n }\n\n useEffect(() => {\n if (focused === index && ref && ref.current) {\n ref.current.focus();\n }\n }, [focused, index]);\n\n return (\n <Tooltip\n open={active === index || dragging === index}\n content={showValue ? null : valueText}\n position=\"top\"\n showDelay={TOOLTIP_SHOW_DELAY}\n addKeyboardHideShowTriggersByDefault={false}\n >\n <div\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-valuemax={max}\n aria-valuemin={min}\n aria-valuenow={value}\n aria-valuetext={valueText}\n aria-disabled={disabled}\n className={cx(\n styles.thumb,\n getStyle(styles, color),\n getStyle(styles, size),\n {\n [styles.dragging]: dragging === index,\n [styles.focused]: focused,\n [styles.notDisabledThumb]: !disabled\n },\n className\n )}\n data-testid={shapeTestId(`thumb-${index}`)}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onPointerDown={handlePointerDown}\n onPointerLeave={handlePointerLeave}\n ref={ref}\n role=\"slider\"\n style={{ left: `${position}%` }}\n tabIndex={disabled ? -1 : 0}\n >\n {showValue && (\n <label\n className={cx(\n styles.label,\n getStyle(styles, camelCase(\"color-\" + valueLabelColor)),\n getStyle(styles, camelCase(\"position-\" + valueLabelPosition))\n )}\n >\n {valueText}\n </label>\n )}\n </div>\n </Tooltip>\n );\n};\n\nexport default SliderThumb;\n"],"names":["SliderThumb","_ref","className","_ref$index","index","_ref$onMove","onMove","NOOP","_ref$position","position","size","color","_useSliderSelection","useSliderSelection","max","min","ranged","valueOrValues","value","valueOrValuesText","valueText","_useSliderUi","useSliderUi","active","ariaLabel","ariaLabelledby","disabled","dragging","focused","shapeTestId","showValue","valueLabelPosition","valueLabelColor","_useSliderActions","useSliderActions","setActive","setFocused","setDragging","ref","useRef","stopMove","document","removeEventListener","useEffect","current","focus","React","createElement","Tooltip","open","content","showDelay","TOOLTIP_SHOW_DELAY","addKeyboardHideShowTriggersByDefault","cx","styles","thumb","getStyle","_defineProperty","notDisabledThumb","concat","onFocus","onBlur","onPointerDown","e","stopPropagation","addEventListener","onPointerLeave","role","style","left","tabIndex","label","camelCase"],"mappings":"ojBAiCA,IAAMA,EAAoC,SAAzBC,GAAgG,IAApEC,EAASD,EAATC,UAASC,EAAAF,EAAEG,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAJ,EAAEK,OAAAA,OAASC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAP,EAAEQ,SAAAA,OAAW,IAAHD,EAAG,EAACA,EAAEE,EAAIT,EAAJS,KAAMC,EAAKV,EAALU,MACpGC,EAAiFC,IAAzEC,EAAGF,EAAHE,IAAKC,EAAGH,EAAHG,IAAKC,EAAMJ,EAANI,OAAeC,EAAaL,EAApBM,MAAiCC,EAAiBP,EAA5BQ,UAC1CF,EAAQF,EAAUC,EAAsCb,GAAUa,EAClEG,EAAYJ,EAAUG,EAA0Cf,GAAUe,EAChFE,EAWIC,IAVFC,EAAMF,EAANE,OACAC,EAASH,EAATG,UACAC,EAAcJ,EAAdI,eACAC,EAAQL,EAARK,SACAC,EAAQN,EAARM,SACAC,EAAOP,EAAPO,QACAC,EAAWR,EAAXQ,YACAC,EAAST,EAATS,UACAC,EAAkBV,EAAlBU,mBACAC,EAAeX,EAAfW,gBAEFC,EAA+CC,IAAvCC,EAASF,EAATE,UAAWC,EAAUH,EAAVG,WAAYC,EAAWJ,EAAXI,YACzBC,EAAMC,EAAO,MAuBnB,SAASC,IACPH,EAAY,MACZI,SAASC,oBAAoB,cAAepC,GAC5CmC,SAASC,oBAAoB,YAAaF,EAC5C,CAQA,OANAG,GAAU,WACJf,IAAYxB,GAASkC,GAAOA,EAAIM,SAClCN,EAAIM,QAAQC,OAEhB,GAAG,CAACjB,EAASxB,IAGX0C,EAACC,cAAAC,EACC,CAAAC,KAAM1B,IAAWnB,GAASuB,IAAavB,EACvC8C,QAASpB,EAAY,KAAOV,EAC5BX,SAAS,MACT0C,UAAWC,EACXC,sCAAsC,GAEtCP,EAAAC,cAAA,MAAA,CAAA,aACcvB,EAAS,kBACJC,EAAc,gBAChBX,EACA,gBAAAC,EACA,gBAAAG,mBACCE,EAAS,gBACVM,EACfxB,UAAWoD,EACTC,EAAOC,MACPC,EAASF,EAAQ5C,GACjB8C,EAASF,EAAQ7C,GAAKgD,EAAAA,EAAAA,EAAA,CAAA,EAEnBH,EAAO5B,SAAWA,IAAavB,GAC/BmD,EAAO3B,QAAUA,GACjB2B,EAAOI,kBAAoBjC,GAE9BxB,GAEW,cAAA2B,EAAW,SAAA+B,OAAUxD,IAClCyD,QAxDN,WACEzB,EAAWhC,GACX+B,EAAU/B,EACZ,EAsDM0D,OA9DN,WACE1B,EAAW,MACXD,EAAU,KACZ,EA4DM4B,cAjDN,SAA2BC,GACzBA,EAAEC,kBACF5B,EAAYjC,GACZqC,SAASyB,iBAAiB,cAAe5D,GACzCmC,SAASyB,iBAAiB,YAAa1B,EACzC,EA6CM2B,eAtDN,WACEhC,EAAU,KACZ,EAqDMG,IAAKA,EACL8B,KAAK,SACLC,MAAO,CAAEC,KAAI,GAAAV,OAAKnD,EAAQ,MAC1B8D,SAAU7C,GAAY,EAAI,GAEzBI,GACCgB,EAAAC,cAAA,QAAA,CACE7C,UAAWoD,EACTC,EAAOiB,MACPf,EAASF,EAAQkB,EAAU,SAAWzC,IACtCyB,EAASF,EAAQkB,EAAU,YAAc1C,MAG1CX,IAMb"}
@@ -1,2 +1,2 @@
1
- var e={thumb:"thumb_8decd7300a",dragging:"dragging_a8c8a86a16",focused:"focused_1efa8bc151",notDisabledThumb:"notDisabledThumb_32ea6ea19d","focus-visible":"focus-visible_ce5cd04439",positive:"positive_d2b8a775ea",negative:"negative_28d35705fc",small:"small_0c705e9bb4",medium:"medium_9ae8c4f59f",large:"large_9ae8c4f59f",label:"label_c08ab94e33"};!function(e){const n="s_id-a3b6698c403a_3_17_1";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+n))return;const a=document.createElement("style");a.id=n,o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=e)}(".thumb_8decd7300a {\n position: absolute;\n border: 3px solid;\n border-radius: 50%;\n border-color: var(--primary-color);\n background-color: var(--primary-background-color);\n font-size: 14px;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n font-family: var(--font-family);\n}\n\n.dragging_a8c8a86a16 {\n cursor: grabbing !important;\n transform: translate(-50%, -50%) scale(1.33, 1.33);\n transform-origin: center center;\n transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n box-shadow: var(--box-shadow-small);\n}\n\n.focused_1efa8bc151 {\n border-color: var(--primary-hover-color);\n cursor: grab;\n box-shadow: var(--box-shadow-small);\n}\n\n.notDisabledThumb_32ea6ea19d:focus-visible, .notDisabledThumb_32ea6ea19d.focus-visible_ce5cd04439 {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.notDisabledThumb_32ea6ea19d:focus:not(.focus-visible_ce5cd04439) {\n outline: none;\n}\n\n.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--primary-hover-color);\n cursor: grab;\n box-shadow: var(--box-shadow-small);\n}\n\n.positive_d2b8a775ea {\n border-color: var(--positive-color);\n}\n\n.positive_d2b8a775ea.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--positive-color-hover);\n}\n\n.negative_28d35705fc {\n border-color: var(--negative-color);\n}\n\n.negative_28d35705fc.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--negative-color-hover);\n}\n\n.small_0c705e9bb4 {\n height: 16px;\n width: 16px;\n}\n\n.medium_9ae8c4f59f {\n height: 24px;\n width: 24px;\n}\n\n.large_9ae8c4f59f {\n height: 24px;\n width: 24px;\n}\n\n.label_c08ab94e33 {\n bottom: calc(100% + 8px);\n left: 50%;\n max-width: 50px;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n transform: translate(-50%, 0);\n white-space: nowrap;\n}");export{e as default};
1
+ var o={thumb:"thumb_8decd7300a",dragging:"dragging_40c95b16fa",focused:"focused_1efa8bc151",notDisabledThumb:"notDisabledThumb_32ea6ea19d","focus-visible":"focus-visible_ce5cd04439",positive:"positive_d2b8a775ea",negative:"negative_28d35705fc",small:"small_0c705e9bb4",medium:"medium_37a7505419",large:"large_9ae8c4f59f",label:"label_b9654e4726",positionTop:"positionTop_05d840a9dc",positionBottom:"positionBottom_2c014ef624",colorPrimary:"colorPrimary_2500f3e2dd",colorSecondary:"colorSecondary_0edbb9d216"};!function(o){const n="s_id-b9e2ed15121b_3_17_1";if("undefined"!=typeof document){const e=document.head||document.getElementsByTagName("head")[0];if(e.querySelector("#"+n))return;const r=document.createElement("style");r.id=n,e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.appendChild(document.createTextNode(o))}else globalThis.injectedStyles&&(globalThis.injectedStyles[n]=o)}(".thumb_8decd7300a {\n position: absolute;\n border: 3px solid;\n border-radius: 50%;\n border-color: var(--primary-color);\n background-color: var(--primary-background-color);\n font-size: 14px;\n top: 50%;\n transform: translate(-50%, -50%);\n transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n font-family: var(--font-family);\n}\n\n.dragging_40c95b16fa {\n cursor: grabbing !important;\n transform: translate(-50%, -50%) scale(1.15, 1.15);\n transform-origin: center center;\n transition: transform var(--motion-productive-long) var(--motion-timing-enter);\n box-shadow: var(--box-shadow-small);\n}\n\n.focused_1efa8bc151 {\n border-color: var(--primary-hover-color);\n cursor: grab;\n box-shadow: var(--box-shadow-small);\n}\n\n.notDisabledThumb_32ea6ea19d:focus-visible, .notDisabledThumb_32ea6ea19d.focus-visible_ce5cd04439 {\n outline: none;\n z-index: 11;\n border-radius: 50%;\n box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0 0 0 1px var(--primary-hover-color) inset;\n}\n\n.notDisabledThumb_32ea6ea19d:focus:not(.focus-visible_ce5cd04439) {\n outline: none;\n}\n\n.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--primary-hover-color);\n cursor: grab;\n box-shadow: var(--box-shadow-small);\n}\n\n.positive_d2b8a775ea {\n border-color: var(--positive-color);\n}\n\n.positive_d2b8a775ea.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--positive-color-hover);\n}\n\n.negative_28d35705fc {\n border-color: var(--negative-color);\n}\n\n.negative_28d35705fc.notDisabledThumb_32ea6ea19d:hover {\n border-color: var(--negative-color-hover);\n}\n\n.small_0c705e9bb4 {\n height: 16px;\n width: 16px;\n}\n\n.medium_37a7505419 {\n height: 20px;\n width: 20px;\n}\n\n.large_9ae8c4f59f {\n height: 24px;\n width: 24px;\n}\n\n.label_b9654e4726 {\n left: 50%;\n max-width: 50px;\n overflow: hidden;\n position: absolute;\n text-overflow: ellipsis;\n transform: translate(-50%, 0);\n white-space: nowrap;\n}\n\n.label_b9654e4726.positionTop_05d840a9dc {\n bottom: calc(100% + 8px);\n}\n\n.label_b9654e4726.positionBottom_2c014ef624 {\n top: calc(100% + 8px);\n}\n\n.label_b9654e4726.colorPrimary_2500f3e2dd {\n color: var(--primary-text-color);\n}\n\n.label_b9654e4726.colorSecondary_0edbb9d216 {\n color: var(--secondary-text-color);\n}");export{o as default};
2
2
  //# sourceMappingURL=SliderThumb.module.scss.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderConstants.js","sources":["../../../../src/components/Slider/SliderConstants.ts"],"sourcesContent":["import { IconType } from \"../Icon\";\nimport { ReactElement } from \"react\";\nimport { SliderSize, SliderColor as SliderColorType } from \"./Slider.types\";\n\nexport const BEM_PREFIX = \"monday\";\n\nexport const COMPONENT_ID = \"slider\";\n\nexport const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;\n\nexport const TOOLTIP_SHOW_DELAY = 300;\n\n/**\n * @deprecated\n */\nexport enum InfixKind {\n PREFIX = \"prefix\",\n POSTFIX = \"postfix\"\n}\n\n/**\n * @deprecated\n */\nexport enum SliderColor {\n PRIMARY = \"primary\",\n NEGATIVE = \"negative\",\n POSITIVE = \"positive\"\n}\n\nexport type SliderContextSelection = {\n max: number;\n min: number;\n ranged: boolean;\n step: number;\n value: number | number[];\n valueText: string | string[];\n};\n\nexport type SliderContextUI = {\n active: number;\n ariaLabel: string;\n ariaLabelledby: string;\n color: SliderColorType;\n disabled: boolean;\n dragging: number;\n focused: number;\n size: SliderSize;\n shapeTestId: (subElement: string) => string;\n showValue: boolean;\n};\n\nexport type SliderContextActions = {\n setActive: (value: number) => void;\n setFocused: (value: number) => void;\n setDragging: (value: number) => void;\n changeThumbValue: (newValue: number | string, thumbIndex?: number, cancelFocus?: boolean) => void;\n drugThumb: (newValue: number | number[]) => void;\n decreaseValue: (consumerStep?: number) => void;\n increaseValue: (consumerStep?: number) => void;\n};\n\nexport type SliderContextInfix = {\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?:\n | { icon: IconType }\n | string\n | ((value: number | number[], valueText: string | string[]) => ReactElement)\n | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?:\n | { icon: IconType }\n | string\n | ((value: number | number[], valueText: string | string[]) => ReactElement)\n | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n};\n"],"names":["InfixKind","SliderColor","UPDATE_SLIDER_SIZE_DEBOUNCE","TOOLTIP_SHOW_DELAY"],"mappings":"AAQO,IAOKA,EAQAC,EAfCC,EAA8B,IAE9BC,EAAqB,KAKlC,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
1
+ {"version":3,"file":"SliderConstants.js","sources":["../../../../src/components/Slider/SliderConstants.ts"],"sourcesContent":["import { IconType } from \"../Icon\";\nimport { ReactElement } from \"react\";\nimport { SliderSize, SliderColor as SliderColorType, SliderLabelPosition, SliderLabelColor } from \"./Slider.types\";\n\nexport const BEM_PREFIX = \"monday\";\n\nexport const COMPONENT_ID = \"slider\";\n\nexport const UPDATE_SLIDER_SIZE_DEBOUNCE = 200;\n\nexport const TOOLTIP_SHOW_DELAY = 300;\n\n/**\n * @deprecated\n */\nexport enum InfixKind {\n PREFIX = \"prefix\",\n POSTFIX = \"postfix\"\n}\n\n/**\n * @deprecated\n */\nexport enum SliderColor {\n PRIMARY = \"primary\",\n NEGATIVE = \"negative\",\n POSITIVE = \"positive\"\n}\n\nexport type SliderContextSelection = {\n max: number;\n min: number;\n ranged: boolean;\n step: number;\n value: number | number[];\n valueText: string | string[];\n};\n\nexport type SliderContextUI = {\n active: number;\n ariaLabel: string;\n ariaLabelledby: string;\n color: SliderColorType;\n disabled: boolean;\n dragging: number;\n focused: number;\n size: SliderSize;\n shapeTestId: (subElement: string) => string;\n showValue: boolean;\n valueLabelPosition: SliderLabelPosition;\n valueLabelColor: SliderLabelColor;\n};\n\nexport type SliderContextActions = {\n setActive: (value: number) => void;\n setFocused: (value: number) => void;\n setDragging: (value: number) => void;\n changeThumbValue: (newValue: number | string, thumbIndex?: number, cancelFocus?: boolean) => void;\n drugThumb: (newValue: number | number[]) => void;\n decreaseValue: (consumerStep?: number) => void;\n increaseValue: (consumerStep?: number) => void;\n};\n\nexport type SliderContextInfix = {\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?:\n | { icon: IconType }\n | string\n | ((value: number | number[], valueText: string | string[]) => ReactElement)\n | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?:\n | { icon: IconType }\n | string\n | ((value: number | number[], valueText: string | string[]) => ReactElement)\n | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n};\n"],"names":["InfixKind","SliderColor","UPDATE_SLIDER_SIZE_DEBOUNCE","TOOLTIP_SHOW_DELAY"],"mappings":"AAQO,IAOKA,EAQAC,EAfCC,EAA8B,IAE9BC,EAAqB,KAKlC,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,QAAA,SACD,CAHD,CAAYA,IAAAA,EAGX,CAAA,IAKD,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,SAAA,UACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
@@ -1,2 +1,2 @@
1
- import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import r,{useState as a,useMemo as t,createContext as l,useContext as u}from"react";import{createTestIdHelper as n}from"../../helpers/testid-helper.js";import{useSliderValues as i,useDragging as o,useSliderActionsContextValue as d}from"./SliderHooks.js";var s=l({}),c=l({}),m=l({}),v=l({});function f(l){var u=l.children,f=l.ariaLabel,p=l.ariaLabelledby,b=l.color,g=l.defaultValue,h=l.disabled,x=l.max,V=l.min,P=l.onChange,T=l.ranged,E=l.showValue,L=l.size,j=l.step,y=l.value,S=l.valueFormatter,w=l.valueText,z=l.infixOptions,H=n(l["data-testid"]),_=i(g,y,S,w),k=_.actualValue,A=_.actualValueText,B=_.getSelectedValue,C=_.setSelectedValue,F=a(null),I=e(F,2),O=I[0],q=I[1],D=a(null),G=e(D,2),J=G[0],K=G[1],M=o(),N=e(M,3),Q=N[0],R=N[1],U=N[2],W=t((function(){return{active:O,ariaLabel:f,ariaLabelledby:p,color:b,disabled:h,dragging:Q,focused:J,size:L,shapeTestId:H,showValue:E}}),[O,f,p,b,h,Q,J,L,H,E]),X=t((function(){return{max:x,min:V,ranged:T,step:j,value:k,valueText:A}}),[x,V,T,j,k,A]),Y=d(k,J,U,B,x,V,P,T,q,K,R,C,j);return r.createElement(s.Provider,{value:W},r.createElement(c.Provider,{value:X},r.createElement(m.Provider,{value:Y},r.createElement(v.Provider,{value:z},u))))}function p(){return u(s)}function b(){return u(v)}function g(){return u(c)}function h(){return u(m)}export{f as SliderProvider,h as useSliderActions,b as useSliderInfix,g as useSliderSelection,p as useSliderUi};
1
+ import{slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import a,{useState as l,useMemo as r,createContext as t,useContext as u}from"react";import{createTestIdHelper as o}from"../../helpers/testid-helper.js";import{useSliderValues as i,useDragging as n,useSliderActionsContextValue as s}from"./SliderHooks.js";var d=t({}),c=t({}),v=t({}),m=t({});function f(t){var u=t.children,f=t.ariaLabel,b=t.ariaLabelledby,p=t.color,g=t.defaultValue,L=t.disabled,h=t.max,x=t.min,P=t.onChange,V=t.ranged,T=t.showValue,E=t.valueLabelPosition,j=t.valueLabelColor,y=t.size,C=t.step,S=t.value,w=t.valueFormatter,z=t.valueText,H=t.infixOptions,_=o(t["data-testid"]),k=i(g,S,w,z),A=k.actualValue,B=k.actualValueText,F=k.getSelectedValue,I=k.setSelectedValue,O=l(null),q=e(O,2),D=q[0],G=q[1],J=l(null),K=e(J,2),M=K[0],N=K[1],Q=n(),R=e(Q,3),U=R[0],W=R[1],X=R[2],Y=r((function(){return{active:D,ariaLabel:f,ariaLabelledby:b,color:p,disabled:L,dragging:U,focused:M,size:y,shapeTestId:_,showValue:T,valueLabelPosition:E,valueLabelColor:j}}),[D,f,b,p,L,U,M,y,_,T,E,j]),Z=r((function(){return{max:h,min:x,ranged:V,step:C,value:A,valueText:B}}),[h,x,V,C,A,B]),$=s(A,M,X,F,h,x,P,V,G,N,W,I,C);return a.createElement(d.Provider,{value:Y},a.createElement(c.Provider,{value:Z},a.createElement(v.Provider,{value:$},a.createElement(m.Provider,{value:H},u))))}function b(){return u(d)}function p(){return u(m)}function g(){return u(c)}function L(){return u(v)}export{f as SliderProvider,L as useSliderActions,p as useSliderInfix,g as useSliderSelection,b as useSliderUi};
2
2
  //# sourceMappingURL=SliderContext.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SliderContext.js","sources":["../../../../src/components/Slider/SliderContext.tsx"],"sourcesContent":["import React, { createContext, ReactElement, useContext, useMemo, useState } from \"react\";\nimport { createTestIdHelper } from \"../../helpers/testid-helper\";\nimport { useDragging, useSliderActionsContextValue, useSliderValues } from \"./SliderHooks\";\nimport { SliderProps } from \"./Slider\";\nimport { SliderContextActions, SliderContextInfix, SliderContextSelection, SliderContextUI } from \"./SliderConstants\";\nimport { IconType } from \"../Icon\";\n\nconst UiContext = createContext({});\nconst SelectionContext = createContext({});\nconst ActionsContext = createContext({});\nconst InfixContext = createContext({});\n\nexport interface SliderProviderProps extends SliderProps {\n children?: ReactElement | ReactElement[];\n infixOptions?: {\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n };\n}\n\nexport function SliderProvider({\n children,\n ariaLabel,\n ariaLabelledby,\n color,\n \"data-testid\": dataTestId,\n defaultValue,\n disabled,\n max,\n min,\n onChange,\n ranged,\n showValue,\n size,\n step,\n value,\n valueFormatter,\n valueText,\n infixOptions\n}: SliderProviderProps) {\n const shapeTestId = createTestIdHelper(dataTestId);\n const { actualValue, actualValueText, getSelectedValue, setSelectedValue } = useSliderValues(\n defaultValue,\n value,\n valueFormatter,\n valueText\n );\n\n const [active, setActive] = useState<number>(null);\n const [focused, setFocused] = useState<number>(null);\n const [dragging, setDragging, getDragging] = useDragging();\n\n const uiContextValue: SliderContextUI = useMemo(\n () => ({ active, ariaLabel, ariaLabelledby, color, disabled, dragging, focused, size, shapeTestId, showValue }),\n [active, ariaLabel, ariaLabelledby, color, disabled, dragging, focused, size, shapeTestId, showValue]\n );\n\n const selectionContextValue: SliderContextSelection = useMemo(\n () => ({\n max,\n min,\n ranged,\n step,\n value: actualValue,\n valueText: actualValueText\n }),\n [max, min, ranged, step, actualValue, actualValueText]\n );\n\n const actionsContextValue: SliderContextActions = useSliderActionsContextValue(\n actualValue,\n focused,\n getDragging,\n getSelectedValue,\n max,\n min,\n onChange,\n ranged,\n setActive,\n setFocused,\n setDragging,\n setSelectedValue,\n step\n );\n\n return (\n <UiContext.Provider value={uiContextValue}>\n <SelectionContext.Provider value={selectionContextValue}>\n <ActionsContext.Provider value={actionsContextValue}>\n <InfixContext.Provider value={infixOptions}>{children}</InfixContext.Provider>\n </ActionsContext.Provider>\n </SelectionContext.Provider>\n </UiContext.Provider>\n );\n}\n\nexport function useSliderUi(): SliderContextUI {\n return useContext(UiContext) as SliderContextUI;\n}\n\nexport function useSliderInfix(): SliderContextInfix {\n return useContext(InfixContext) as SliderContextInfix;\n}\n\nexport function useSliderSelection(): SliderContextSelection {\n return useContext(SelectionContext) as SliderContextSelection;\n}\n\nexport function useSliderActions(): SliderContextActions {\n return useContext(ActionsContext) as SliderContextActions;\n}\n"],"names":["UiContext","createContext","SelectionContext","ActionsContext","InfixContext","SliderProvider","_ref","children","ariaLabel","ariaLabelledby","color","defaultValue","disabled","max","min","onChange","ranged","showValue","size","step","value","valueFormatter","valueText","infixOptions","shapeTestId","createTestIdHelper","_useSliderValues","useSliderValues","actualValue","actualValueText","getSelectedValue","setSelectedValue","_useState","useState","_useState2","_slicedToArray","active","setActive","_useState3","_useState4","focused","setFocused","_useDragging","useDragging","_useDragging2","dragging","setDragging","getDragging","uiContextValue","useMemo","selectionContextValue","actionsContextValue","useSliderActionsContextValue","React","Provider","createElement","useSliderUi","useContext","useSliderInfix","useSliderSelection","useSliderActions"],"mappings":"6UAOA,IAAMA,EAAYC,EAAc,CAAA,GAC1BC,EAAmBD,EAAc,CAAA,GACjCE,EAAiBF,EAAc,CAAA,GAC/BG,EAAeH,EAAc,CAAA,YA4BnBI,EAAcC,GAmBR,IAlBpBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAAKJ,EAALI,MAEAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SACAC,EAAGP,EAAHO,IACAC,EAAGR,EAAHQ,IACAC,EAAQT,EAARS,SACAC,EAAMV,EAANU,OACAC,EAASX,EAATW,UACAC,EAAIZ,EAAJY,KACAC,EAAIb,EAAJa,KACAC,EAAKd,EAALc,MACAC,EAAcf,EAAde,eACAC,EAAShB,EAATgB,UACAC,EAAYjB,EAAZiB,aAEMC,EAAcC,EAfKnB,EAAzB,gBAgBAoB,EAA6EC,EAC3EhB,EACAS,EACAC,EACAC,GAJMM,EAAWF,EAAXE,YAAaC,EAAeH,EAAfG,gBAAiBC,EAAgBJ,EAAhBI,iBAAkBC,EAAgBL,EAAhBK,iBAOxDC,EAA4BC,EAAiB,MAAKC,EAAAC,EAAAH,EAAA,GAA3CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA8BL,EAAiB,MAAKM,EAAAJ,EAAAG,EAAA,GAA7CE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAC1BG,EAA6CC,IAAaC,EAAAT,EAAAO,EAAA,GAAnDG,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GAAEG,EAAWH,EAAA,GAEnCI,EAAkCC,GACtC,WAAA,MAAO,CAAEb,OAAAA,EAAQ5B,UAAAA,EAAWC,eAAAA,EAAgBC,MAAAA,EAAOE,SAAAA,EAAUiC,SAAAA,EAAUL,QAAAA,EAAStB,KAAAA,EAAMM,YAAAA,EAAaP,UAAAA,EAAY,GAC/G,CAACmB,EAAQ5B,EAAWC,EAAgBC,EAAOE,EAAUiC,EAAUL,EAAStB,EAAMM,EAAaP,IAGvFiC,EAAgDD,GACpD,WAAA,MAAO,CACLpC,IAAAA,EACAC,IAAAA,EACAE,OAAAA,EACAG,KAAAA,EACAC,MAAOQ,EACPN,UAAWO,EACZ,GACD,CAAChB,EAAKC,EAAKE,EAAQG,EAAMS,EAAaC,IAGlCsB,EAA4CC,EAChDxB,EACAY,EACAO,EACAjB,EACAjB,EACAC,EACAC,EACAC,EACAqB,EACAI,EACAK,EACAf,EACAZ,GAGF,OACEkC,gBAACrD,EAAUsD,SAAS,CAAAlC,MAAO4B,GACzBK,EAAAE,cAACrD,EAAiBoD,SAAS,CAAAlC,MAAO8B,GAChCG,EAAAE,cAACpD,EAAemD,SAAS,CAAAlC,MAAO+B,GAC9BE,EAAAE,cAACnD,EAAakD,SAAQ,CAAClC,MAAOG,GAAehB,KAKvD,UAEgBiD,IACd,OAAOC,EAAWzD,EACpB,UAEgB0D,IACd,OAAOD,EAAWrD,EACpB,UAEgBuD,IACd,OAAOF,EAAWvD,EACpB,UAEgB0D,IACd,OAAOH,EAAWtD,EACpB"}
1
+ {"version":3,"file":"SliderContext.js","sources":["../../../../src/components/Slider/SliderContext.tsx"],"sourcesContent":["import React, { createContext, ReactElement, useContext, useMemo, useState } from \"react\";\nimport { createTestIdHelper } from \"../../helpers/testid-helper\";\nimport { useDragging, useSliderActionsContextValue, useSliderValues } from \"./SliderHooks\";\nimport { SliderProps } from \"./Slider\";\nimport { SliderContextActions, SliderContextInfix, SliderContextSelection, SliderContextUI } from \"./SliderConstants\";\nimport { IconType } from \"../Icon\";\n\nconst UiContext = createContext({});\nconst SelectionContext = createContext({});\nconst ActionsContext = createContext({});\nconst InfixContext = createContext({});\n\nexport interface SliderProviderProps extends SliderProps {\n children?: ReactElement | ReactElement[];\n infixOptions?: {\n /**\n * Show selected from Slider range value\n */\n indicateSelection?: boolean;\n /**\n * Options for initial/start/prefix element, it can be one of:\n * - Any Component (react component, node, text, number etc.)\n * - Or it can be an object of options for Icons component (see Icon components props)\n * - Or it can be an object for Label (Icon, Heading - and other components)\n * - Or it can be Render Props Function witch are getting value and valueText\n */\n prefix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Options for postfix/end/finishing element. Same as prefix element.\n */\n postfix?: { icon: IconType } | string | ((value: number, valueText: string) => void) | ReactElement;\n /**\n * Width of SelectionIndicator (i.e. TextField)\n */\n selectionIndicatorWidth?: string;\n };\n}\n\nexport function SliderProvider({\n children,\n ariaLabel,\n ariaLabelledby,\n color,\n \"data-testid\": dataTestId,\n defaultValue,\n disabled,\n max,\n min,\n onChange,\n ranged,\n showValue,\n valueLabelPosition,\n valueLabelColor,\n size,\n step,\n value,\n valueFormatter,\n valueText,\n infixOptions\n}: SliderProviderProps) {\n const shapeTestId = createTestIdHelper(dataTestId);\n const { actualValue, actualValueText, getSelectedValue, setSelectedValue } = useSliderValues(\n defaultValue,\n value,\n valueFormatter,\n valueText\n );\n\n const [active, setActive] = useState<number>(null);\n const [focused, setFocused] = useState<number>(null);\n const [dragging, setDragging, getDragging] = useDragging();\n\n const uiContextValue: SliderContextUI = useMemo(\n () => ({\n active,\n ariaLabel,\n ariaLabelledby,\n color,\n disabled,\n dragging,\n focused,\n size,\n shapeTestId,\n showValue,\n valueLabelPosition,\n valueLabelColor\n }),\n [\n active,\n ariaLabel,\n ariaLabelledby,\n color,\n disabled,\n dragging,\n focused,\n size,\n shapeTestId,\n showValue,\n valueLabelPosition,\n valueLabelColor\n ]\n );\n\n const selectionContextValue: SliderContextSelection = useMemo(\n () => ({\n max,\n min,\n ranged,\n step,\n value: actualValue,\n valueText: actualValueText\n }),\n [max, min, ranged, step, actualValue, actualValueText]\n );\n\n const actionsContextValue: SliderContextActions = useSliderActionsContextValue(\n actualValue,\n focused,\n getDragging,\n getSelectedValue,\n max,\n min,\n onChange,\n ranged,\n setActive,\n setFocused,\n setDragging,\n setSelectedValue,\n step\n );\n\n return (\n <UiContext.Provider value={uiContextValue}>\n <SelectionContext.Provider value={selectionContextValue}>\n <ActionsContext.Provider value={actionsContextValue}>\n <InfixContext.Provider value={infixOptions}>{children}</InfixContext.Provider>\n </ActionsContext.Provider>\n </SelectionContext.Provider>\n </UiContext.Provider>\n );\n}\n\nexport function useSliderUi(): SliderContextUI {\n return useContext(UiContext) as SliderContextUI;\n}\n\nexport function useSliderInfix(): SliderContextInfix {\n return useContext(InfixContext) as SliderContextInfix;\n}\n\nexport function useSliderSelection(): SliderContextSelection {\n return useContext(SelectionContext) as SliderContextSelection;\n}\n\nexport function useSliderActions(): SliderContextActions {\n return useContext(ActionsContext) as SliderContextActions;\n}\n"],"names":["UiContext","createContext","SelectionContext","ActionsContext","InfixContext","SliderProvider","_ref","children","ariaLabel","ariaLabelledby","color","defaultValue","disabled","max","min","onChange","ranged","showValue","valueLabelPosition","valueLabelColor","size","step","value","valueFormatter","valueText","infixOptions","shapeTestId","createTestIdHelper","_useSliderValues","useSliderValues","actualValue","actualValueText","getSelectedValue","setSelectedValue","_useState","useState","_useState2","_slicedToArray","active","setActive","_useState3","_useState4","focused","setFocused","_useDragging","useDragging","_useDragging2","dragging","setDragging","getDragging","uiContextValue","useMemo","selectionContextValue","actionsContextValue","useSliderActionsContextValue","React","Provider","createElement","useSliderUi","useContext","useSliderInfix","useSliderSelection","useSliderActions"],"mappings":"6UAOA,IAAMA,EAAYC,EAAc,CAAA,GAC1BC,EAAmBD,EAAc,CAAA,GACjCE,EAAiBF,EAAc,CAAA,GAC/BG,EAAeH,EAAc,CAAA,GA4B7B,SAAUI,EAAcC,GAqBR,IApBpBC,EAAQD,EAARC,SACAC,EAASF,EAATE,UACAC,EAAcH,EAAdG,eACAC,EAAKJ,EAALI,MAEAC,EAAYL,EAAZK,aACAC,EAAQN,EAARM,SACAC,EAAGP,EAAHO,IACAC,EAAGR,EAAHQ,IACAC,EAAQT,EAARS,SACAC,EAAMV,EAANU,OACAC,EAASX,EAATW,UACAC,EAAkBZ,EAAlBY,mBACAC,EAAeb,EAAfa,gBACAC,EAAId,EAAJc,KACAC,EAAIf,EAAJe,KACAC,EAAKhB,EAALgB,MACAC,EAAcjB,EAAdiB,eACAC,EAASlB,EAATkB,UACAC,EAAYnB,EAAZmB,aAEMC,EAAcC,EAjBKrB,EAAzB,gBAkBAsB,EAA6EC,EAC3ElB,EACAW,EACAC,EACAC,GAJMM,EAAWF,EAAXE,YAAaC,EAAeH,EAAfG,gBAAiBC,EAAgBJ,EAAhBI,iBAAkBC,EAAgBL,EAAhBK,iBAOxDC,EAA4BC,EAAiB,MAAKC,EAAAC,EAAAH,EAAA,GAA3CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GACxBI,EAA8BL,EAAiB,MAAKM,EAAAJ,EAAAG,EAAA,GAA7CE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAC1BG,EAA6CC,IAAaC,EAAAT,EAAAO,EAAA,GAAnDG,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GAAEG,EAAWH,EAAA,GAEnCI,EAAkCC,GACtC,WAAA,MAAO,CACLb,OAAAA,EACA9B,UAAAA,EACAC,eAAAA,EACAC,MAAAA,EACAE,SAAAA,EACAmC,SAAAA,EACAL,QAAAA,EACAtB,KAAAA,EACAM,YAAAA,EACAT,UAAAA,EACAC,mBAAAA,EACAC,gBAAAA,EACA,GACF,CACEmB,EACA9B,EACAC,EACAC,EACAE,EACAmC,EACAL,EACAtB,EACAM,EACAT,EACAC,EACAC,IAIEiC,EAAgDD,GACpD,WAAA,MAAO,CACLtC,IAAAA,EACAC,IAAAA,EACAE,OAAAA,EACAK,KAAAA,EACAC,MAAOQ,EACPN,UAAWO,EACZ,GACD,CAAClB,EAAKC,EAAKE,EAAQK,EAAMS,EAAaC,IAGlCsB,EAA4CC,EAChDxB,EACAY,EACAO,EACAjB,EACAnB,EACAC,EACAC,EACAC,EACAuB,EACAI,EACAK,EACAf,EACAZ,GAGF,OACEkC,gBAACvD,EAAUwD,SAAS,CAAAlC,MAAO4B,GACzBK,EAAAE,cAACvD,EAAiBsD,SAAS,CAAAlC,MAAO8B,GAChCG,EAAAE,cAACtD,EAAeqD,SAAS,CAAAlC,MAAO+B,GAC9BE,EAAAE,cAACrD,EAAaoD,SAAQ,CAAClC,MAAOG,GAAelB,KAKvD,UAEgBmD,IACd,OAAOC,EAAW3D,EACpB,UAEgB4D,IACd,OAAOD,EAAWvD,EACpB,UAEgByD,IACd,OAAOF,EAAWzD,EACpB,UAEgB4D,IACd,OAAOH,EAAWxD,EACpB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibe/core",
3
- "version": "3.18.0-alpha-a3fe2.0",
3
+ "version": "3.18.0",
4
4
  "description": "Official monday.com UI resources for application development in React.js",
5
5
  "repository": {
6
6
  "type": "git",
@@ -82,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@popperjs/core": "2.11.6",
85
- "@vibe/icons": "1.4.0-alpha-a3fe2.0",
85
+ "@vibe/icons": "1.4.0",
86
86
  "a11y-dialog": "^7.5.2",
87
87
  "body-scroll-lock": "^4.0.0-beta.0",
88
88
  "browserslist-config-monday": "1.0.6",
@@ -268,5 +268,5 @@
268
268
  "browserslist": [
269
269
  "extends browserslist-config-monday"
270
270
  ],
271
- "gitHead": "002629ee10a61748f4664ccf9d015881229b8f7e"
271
+ "gitHead": "e157a38cc880f96ebfc3623c8965ae5e1a4d5088"
272
272
  }