@skodaflow/web-library 8.0.0 → 8.1.0

package/materialui/typography/typography.theme.js

@@ -1,2 +1,2 @@
-import{createBreakpoints as t}from"@mui/system";import e from"@skodaflow/web-tokens/src/tokens.json";const n=(t,n,i)=>{const s=null!=i?i:"small",o=e["flow-typography"].find(e=>e.name===`${s}-${t}`);return o?Object.assign(Object.assign({},o.style),n?{fontFamily:"SKODA Next R2L"}:{}):null},i=(e,i,s)=>{const o=t(i);return Object.assign(Object.assign({},n(e,s,"small")),{[o.up("md")]:Object.assign({},n(e,s,"medium")),[o.up("xl")]:Object.assign({},n(e,s,"large"))})},s=(t,e)=>{const n=i("body",t,e);return Object.assign(Object.assign({fontFamily:["SKODA Next"+(e?" R2L":""),"sans-serif","Arial"].join(","),body:n},Object.fromEntries(["h1","h2","h3","h4","subheadline","subtitle1","subtitle2","display","list","disclaimer","disclaimer1","disclaimer2","caption1","caption2"].map(n=>[n,i(n,t,e)]))),{body1:n,body2:n,h5:i("subheadline",t,e),h6:i("caption1",t,e),caption:i("caption2",t,e),overline:i("caption1",t,e),button:{fontFamily:e?"SKODA Next R2L":"SKODA Next",letterSpacing:"0.75px",textTransform:"none",textDecoration:"none",fontSize:"16px",fontWeight:"700",lineHeight:"16px"}})};export{i as generateTypography,n as getTypography,s as getTypographyOptions};
+import{createBreakpoints as t}from"@mui/system";import e from"@skodaflow/web-tokens/src/tokens.json";const o=(t,o,n)=>{const i=n??"small",s=e["flow-typography"].find(e=>e.name===`${i}-${t}`);return s?{...s.style,...o?{fontFamily:"SKODA Next R2L"}:{}}:null},n=(e,n,i)=>{const s=t(n);return{...o(e,i,"small"),[s.up("md")]:{...o(e,i,"medium")},[s.up("xl")]:{...o(e,i,"large")}}},i=(t,e)=>{const o=n("body",t,e);return{fontFamily:["SKODA Next"+(e?" R2L":""),"sans-serif","Arial"].join(","),body:o,...Object.fromEntries(["h1","h2","h3","h4","subheadline","subtitle1","subtitle2","display","list","disclaimer","disclaimer1","disclaimer2","caption1","caption2"].map(o=>[o,n(o,t,e)])),body1:o,body2:o,h5:n("subheadline",t,e),h6:n("caption1",t,e),caption:n("caption2",t,e),overline:n("caption1",t,e),button:{fontFamily:e?"SKODA Next R2L":"SKODA Next",letterSpacing:"0.75px",textTransform:"none",textDecoration:"none",fontSize:"16px",fontWeight:"700",lineHeight:"16px"}}};export{n as generateTypography,o as getTypography,i as getTypographyOptions};
 //# sourceMappingURL=typography.theme.js.map

package/materialui/typography/typography.theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.theme.js","sources":["../../../src/materialui/typography/typography.theme.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { BreakpointsOptions, createBreakpoints } from '@mui/system';\nimport { ThemeOptions } from '@mui/material/styles';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\n\nexport type TypographySize = 'small' | 'medium' | 'large';\n\n/**\n * Obtain style for element for the certain size\n */\nexport const getTypography = (element: string, rtl: boolean, size?: TypographySize) => {\n  const screen = size ?? 'small';\n  const typo = tokens['flow-typography'].find((el) => el.name === `${screen}-${element}`);\n  if (typo)\n    return {\n      ...typo['style'],\n      // replace font for rtl variant\n      ...(rtl\n        ? {\n            fontFamily: 'SKODA Next R2L',\n          }\n        : {}),\n    } as CSSProperties;\n  else return null;\n};\n\n/**\n * Generate responsive typography style with the media queries\n */\nexport const generateTypography = (element: string, breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n  const breakpoints = createBreakpoints(breakpointsOptions);\n\n  return {\n    ...getTypography(element, rtl, 'small'),\n    [breakpoints.up('md')]: {\n      ...getTypography(element, rtl, 'medium'),\n    },\n    [breakpoints.up('xl')]: {\n      ...getTypography(element, rtl, 'large'),\n    },\n  };\n};\n\n/**\n * Build the typography theme options\n */\nexport const getTypographyOptions = (\n  breakpointsOptions: BreakpointsOptions,\n  rtl: boolean,\n): ThemeOptions['typography'] => {\n  const bodyTypo = generateTypography('body', breakpointsOptions, rtl);\n\n  return {\n    fontFamily: [`SKODA Next${rtl ? ' R2L' : ''}`, 'sans-serif', 'Arial'].join(','),\n    body: bodyTypo,\n    ...Object.fromEntries(\n      [\n        'h1',\n        'h2',\n        'h3',\n        'h4',\n        'subheadline',\n        'subtitle1',\n        'subtitle2',\n        'display',\n        'list',\n        'disclaimer',\n        'disclaimer1',\n        'disclaimer2',\n        'caption1',\n        'caption2',\n      ].map((element) => [element, generateTypography(element, breakpointsOptions, rtl)]),\n    ),\n    // original @mui properties\n    body1: bodyTypo,\n    body2: bodyTypo,\n    h5: generateTypography('subheadline', breakpointsOptions, rtl),\n    h6: generateTypography('caption1', breakpointsOptions, rtl),\n    caption: generateTypography('caption2', breakpointsOptions, rtl),\n    overline: generateTypography('caption1', breakpointsOptions, rtl),\n    // button, later this definition should come from @skodaflow/web-tokens\n    button: {\n      fontFamily: rtl ? 'SKODA Next R2L' : 'SKODA Next',\n      letterSpacing: '0.75px',\n      textTransform: 'none',\n      textDecoration: 'none',\n      fontSize: '16px',\n      fontWeight: '700',\n      lineHeight: '16px',\n    },\n  };\n};\n"],"names":["getTypography","element","rtl","size","screen","typo","tokens","find","el","name","Object","fontFamily","generateTypography","breakpointsOptions","breakpoints","createBreakpoints","assign","up","getTypographyOptions","bodyTypo","join","body","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"qGAUO,MAAMA,EAAgB,CAACC,EAAiBC,EAAcC,KAC3D,MAAMC,EAASD,QAAAA,EAAQ,QACjBE,EAAOC,EAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,KAAUH,KAC7E,OAAII,EACKK,+BACFL,EAAY,OAEXH,EACA,CACES,WAAY,kBAEd,IAEI,MAMDC,EAAqB,CAACX,EAAiBY,EAAwCX,KAC1F,MAAMY,EAAcC,EAAkBF,GAEtC,OAAAH,OAAAM,OAAAN,OAAAM,OAAA,CAAA,EACKhB,EAAcC,EAASC,EAAK,UAAQ,CACvC,CAACY,EAAYG,GAAG,OAAMP,OAAAM,OAAA,CAAA,EACjBhB,EAAcC,EAASC,EAAK,WAEjC,CAACY,EAAYG,GAAG,OAAMP,OAAAM,OAAA,CAAA,EACjBhB,EAAcC,EAASC,EAAK,aAQxBgB,EAAuB,CAClCL,EACAX,KAEA,MAAMiB,EAAWP,EAAmB,OAAQC,EAAoBX,GAEhE,OAAAQ,OAAAM,OAAAN,OAAAM,OAAA,CACEL,WAAY,CAAC,cAAaT,EAAM,OAAS,IAAM,aAAc,SAASkB,KAAK,KAC3EC,KAAMF,GACHT,OAAOY,YACR,CACE,KACA,KACA,KACA,KACA,cACA,YACA,YACA,UACA,OACA,aACA,cACA,cACA,WACA,YACAC,IAAKtB,GAAY,CAACA,EAASW,EAAmBX,EAASY,EAAoBX,OAC9E,CAEDsB,MAAOL,EACPM,MAAON,EACPO,GAAId,EAAmB,cAAeC,EAAoBX,GAC1DyB,GAAIf,EAAmB,WAAYC,EAAoBX,GACvD0B,QAAShB,EAAmB,WAAYC,EAAoBX,GAC5D2B,SAAUjB,EAAmB,WAAYC,EAAoBX,GAE7D4B,OAAQ,CACNnB,WAAYT,EAAM,iBAAmB,aACrC6B,cAAe,SACfC,cAAe,OACfC,eAAgB,OAChBC,SAAU,OACVC,WAAY,MACZC,WAAY"}
+{"version":3,"file":"typography.theme.js","sources":["../../../src/materialui/typography/typography.theme.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { BreakpointsOptions, createBreakpoints } from '@mui/system';\nimport tokens from '@skodaflow/web-tokens/src/tokens.json';\n\nexport type TypographySize = 'small' | 'medium' | 'large';\n\n/**\n * Obtain style for element for the certain size\n */\nexport const getTypography = (element: string, rtl: boolean, size?: TypographySize) => {\n  const screen = size ?? 'small';\n  const typo = tokens['flow-typography'].find((el) => el.name === `${screen}-${element}`);\n  if (typo)\n    return {\n      ...typo['style'],\n      // replace font for rtl variant\n      ...(rtl\n        ? {\n            fontFamily: 'SKODA Next R2L',\n          }\n        : {}),\n    } as CSSProperties;\n  else return null;\n};\n\n/**\n * Generate responsive typography style with the media queries\n */\nexport const generateTypography = (element: string, breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n  const breakpoints = createBreakpoints(breakpointsOptions);\n\n  return {\n    ...getTypography(element, rtl, 'small'),\n    [breakpoints.up('md')]: {\n      ...getTypography(element, rtl, 'medium'),\n    },\n    [breakpoints.up('xl')]: {\n      ...getTypography(element, rtl, 'large'),\n    },\n  };\n};\n\n/**\n * Build the typography theme options\n */\nexport const getTypographyOptions = (breakpointsOptions: BreakpointsOptions, rtl: boolean) => {\n  const bodyTypo = generateTypography('body', breakpointsOptions, rtl);\n\n  return {\n    fontFamily: [`SKODA Next${rtl ? ' R2L' : ''}`, 'sans-serif', 'Arial'].join(','),\n    body: bodyTypo,\n    ...Object.fromEntries(\n      [\n        'h1',\n        'h2',\n        'h3',\n        'h4',\n        'subheadline',\n        'subtitle1',\n        'subtitle2',\n        'display',\n        'list',\n        'disclaimer',\n        'disclaimer1',\n        'disclaimer2',\n        'caption1',\n        'caption2',\n      ].map((element) => [element, generateTypography(element, breakpointsOptions, rtl)]),\n    ),\n    // original @mui properties\n    body1: bodyTypo,\n    body2: bodyTypo,\n    h5: generateTypography('subheadline', breakpointsOptions, rtl),\n    h6: generateTypography('caption1', breakpointsOptions, rtl),\n    caption: generateTypography('caption2', breakpointsOptions, rtl),\n    overline: generateTypography('caption1', breakpointsOptions, rtl),\n    // button, later this definition should come from @skodaflow/web-tokens\n    button: {\n      fontFamily: rtl ? 'SKODA Next R2L' : 'SKODA Next',\n      letterSpacing: '0.75px',\n      textTransform: 'none',\n      textDecoration: 'none',\n      fontSize: '16px',\n      fontWeight: '700',\n      lineHeight: '16px',\n    },\n  };\n};\n"],"names":["getTypography","element","rtl","size","screen","typo","tokens","find","el","name","fontFamily","generateTypography","breakpointsOptions","breakpoints","createBreakpoints","up","getTypographyOptions","bodyTypo","join","body","Object","fromEntries","map","body1","body2","h5","h6","caption","overline","button","letterSpacing","textTransform","textDecoration","fontSize","fontWeight","lineHeight"],"mappings":"qGASO,MAAMA,EAAgB,CAACC,EAAiBC,EAAcC,KAC3D,MAAMC,EAASD,GAAQ,QACjBE,EAAOC,EAAO,mBAAmBC,KAAMC,GAAOA,EAAGC,OAAS,GAAGL,KAAUH,KAC7E,OAAII,EACK,IACFA,EAAY,SAEXH,EACA,CACEQ,WAAY,kBAEd,IAEI,MAMDC,EAAqB,CAACV,EAAiBW,EAAwCV,KAC1F,MAAMW,EAAcC,EAAkBF,GAEtC,MAAO,IACFZ,EAAcC,EAASC,EAAK,SAC/B,CAACW,EAAYE,GAAG,OAAQ,IACnBf,EAAcC,EAASC,EAAK,WAEjC,CAACW,EAAYE,GAAG,OAAQ,IACnBf,EAAcC,EAASC,EAAK,YAQxBc,EAAuB,CAACJ,EAAwCV,KAC3E,MAAMe,EAAWN,EAAmB,OAAQC,EAAoBV,GAEhE,MAAO,CACLQ,WAAY,CAAC,cAAaR,EAAM,OAAS,IAAM,aAAc,SAASgB,KAAK,KAC3EC,KAAMF,KACHG,OAAOC,YACR,CACE,KACA,KACA,KACA,KACA,cACA,YACA,YACA,UACA,OACA,aACA,cACA,cACA,WACA,YACAC,IAAKrB,GAAY,CAACA,EAASU,EAAmBV,EAASW,EAAoBV,MAG/EqB,MAAON,EACPO,MAAOP,EACPQ,GAAId,EAAmB,cAAeC,EAAoBV,GAC1DwB,GAAIf,EAAmB,WAAYC,EAAoBV,GACvDyB,QAAShB,EAAmB,WAAYC,EAAoBV,GAC5D0B,SAAUjB,EAAmB,WAAYC,EAAoBV,GAE7D2B,OAAQ,CACNnB,WAAYR,EAAM,iBAAmB,aACrC4B,cAAe,SACfC,cAAe,OACfC,eAAgB,OAChBC,SAAU,OACVC,WAAY,MACZC,WAAY"}

package/package.json

@@ -1 +1 @@
-{"name":"@skodaflow/web-library","version":"8.0.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.0","@mui/x-date-pickers":"^8.21.0","@mui/material":"^7.3.5","@mui/system":"^7.3.5","country-flag-icons":"^1.5.21","react":"^18.3.1 || ^19.2.3","react-dom":"^18.3.1 || ^19.2.3","swiper":"^12.0.3"},"dependencies":{"@skodaflow/web-tokens":"3.1.1","stylis":"4.3.6","stylis-plugin-rtl":"2.1.1","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}
+{"name":"@skodaflow/web-library","version":"8.1.0","description":"Implementation of Skoda Flow Design System with Material UI as core library.","author":"Skoda Auto","license":"SKODA AUTO Library EULA 1.1","peerDependencies":{"@emotion/cache":"^11.14.0","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/material":"^7.3.8","@mui/system":"^7.3.8","@mui/x-date-pickers":"^8.27.2","country-flag-icons":"^1.6.15","react":"^18.3.1 || ^19.2.4","react-dom":"^18.3.1 || ^19.2.4","swiper":"^12.1.2"},"dependencies":{"@skodaflow/web-tokens":"3.2.0","stylis":"4.3.6","stylis-plugin-rtl":"2.1.1","tslib":"2.8.1"},"sideEffects":false,"main":"./cjs/index.js","browser":"./index.js","module":"./index.js","types":"./index.d.ts"}

package/utils/copyToClipboard/copyToClipboard.d.ts

@@ -3,4 +3,4 @@
  *
  * @param {string} text - value to copy
  */
-export default function copyToClipboard(text: string): Promise<unknown>;
+export declare function copyToClipboard(text: string): Promise<unknown>;

package/utils/copyToClipboard/copyToClipboard.js

@@ -0,0 +1,2 @@
+function e(e){return navigator.clipboard.writeText(e).catch(()=>new Promise(t=>{const n=document.createElement("textarea");return n.innerText=e,document.body.appendChild(n),n.select(),document.execCommand("copy"),n.remove(),t(!0)}))}export{e as copyToClipboard};
+//# sourceMappingURL=copyToClipboard.js.map

package/utils/copyToClipboard/copyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.js","sources":["../../../src/utils/copyToClipboard/copyToClipboard.ts"],"sourcesContent":["/**\n * Copy provided value to the clipboard (ctrl + c)\n *\n * @param {string} text - value to copy\n */\nexport function copyToClipboard(text: string) {\n  return navigator.clipboard.writeText(text).catch(() => {\n    // we might not have navigator (unsecure domain) or writeText permission\n    // fallback to execCommand\n    return new Promise((resolve) => {\n      // create text field with value, select, copy and remove it\n      const textField = document.createElement('textarea');\n      textField.innerText = text;\n      document.body.appendChild(textField);\n      textField.select();\n      document.execCommand('copy');\n      textField.remove();\n      // finish promise\n      return resolve(true);\n    });\n  });\n}\n"],"names":["copyToClipboard","text","navigator","clipboard","writeText","catch","Promise","resolve","textField","document","createElement","innerText","body","appendChild","select","execCommand","remove"],"mappings":"AAKM,SAAUA,EAAgBC,GAC9B,OAAOC,UAAUC,UAAUC,UAAUH,GAAMI,MAAM,IAGxC,IAAIC,QAASC,IAElB,MAAMC,EAAYC,SAASC,cAAc,YAOzC,OANAF,EAAUG,UAAYV,EACtBQ,SAASG,KAAKC,YAAYL,GAC1BA,EAAUM,SACVL,SAASM,YAAY,QACrBP,EAAUQ,SAEHT,GAAQ,KAGrB"}

package/utils/rgbaToRgb/index.d.ts

@@ -0,0 +1 @@
+export * from './rgbaToRgb';

package/utils/rgbaToRgb/rgbaToRgb.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts an rgba color string to an rgb color string.
+ * @param color - rgba color string
+ * @returns rgb color string
+ */
+export default function rgbaToRgb(color: string): string;

package/utils/useDebounce/useDebounce.js

@@ -1,2 +1,2 @@
-import{useState as r,useRef as t,useEffect as e}from"react";function u(u,n,o){const[c,i]=r(u),a=t(null);return e(()=>(a.current=setTimeout(()=>{i(u)},n),()=>{a.current&&clearTimeout(a.current)}),[u,n,void 0]),c}export{u as default};
+import{useState as t,useRef as r,useEffect as e}from"react";function n(n,u,c){const[o,a]=t(n),i=r(null);return e(()=>(i.current=setTimeout(()=>{a(n)},u),()=>{i.current&&clearTimeout(i.current)}),[n,u,c?.instantClear]),o}export{n as default};
 //# sourceMappingURL=useDebounce.js.map

package/utils/useDebounce/useDebounce.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDebounce.js","sources":["../../../src/utils/useDebounce/useDebounce.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Returns value after a specified time period has passed without any further changes\n *\n * @param {T} value - value to be debounced\n * @param {number} delay - wait time before updating debounce value\n * @param {object} options - set of options to tweak behavior\n * @param {boolean} options.instantClear - with !value, instantly update debouncedValue\n * @returns {T} debouncedValue\n */\nexport default function useDebounce<T>(value: T, delay: number, options?: { instantClear?: boolean }): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeout = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (!value && options?.instantClear) {\n      setDebouncedValue(value);\n    } else {\n      timeout.current = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n    }\n\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n    };\n  }, [value, delay, options?.instantClear]);\n\n  return debouncedValue;\n}\n"],"names":["useDebounce","value","delay","options","debouncedValue","setDebouncedValue","useState","timeout","useRef","useEffect","current","setTimeout","clearTimeout"],"mappings":"4DAWc,SAAUA,EAAeC,EAAUC,EAAeC,GAC9D,MAAOC,EAAgBC,GAAqBC,EAASL,GAC/CM,EAAUC,EAA8B,MAkB9C,OAhBAC,EAAU,KAINF,EAAQG,QAAUC,WAAW,KAC3BN,EAAkBJ,IACjBC,GAGE,KACDK,EAAQG,SACVE,aAAaL,EAAQG,WAGxB,CAACT,EAAOC,WAEJE,CACT"}
+{"version":3,"file":"useDebounce.js","sources":["../../../src/utils/useDebounce/useDebounce.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Returns value after a specified time period has passed without any further changes\n *\n * @param {T} value - value to be debounced\n * @param {number} delay - wait time before updating debounce value\n * @param {object} options - set of options to tweak behavior\n * @param {boolean} options.instantClear - with !value, instantly update debouncedValue\n * @returns {T} debouncedValue\n */\nexport default function useDebounce<T>(value: T, delay: number, options?: { instantClear?: boolean }): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n  const timeout = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (!value && options?.instantClear) {\n      setDebouncedValue(value);\n    } else {\n      timeout.current = setTimeout(() => {\n        setDebouncedValue(value);\n      }, delay);\n    }\n\n    return () => {\n      if (timeout.current) {\n        clearTimeout(timeout.current);\n      }\n    };\n  }, [value, delay, options?.instantClear]);\n\n  return debouncedValue;\n}\n"],"names":["useDebounce","value","delay","options","debouncedValue","setDebouncedValue","useState","timeout","useRef","useEffect","current","setTimeout","clearTimeout","instantClear"],"mappings":"4DAWc,SAAUA,EAAeC,EAAUC,EAAeC,GAC9D,MAAOC,EAAgBC,GAAqBC,EAASL,GAC/CM,EAAUC,EAA8B,MAkB9C,OAhBAC,EAAU,KAINF,EAAQG,QAAUC,WAAW,KAC3BN,EAAkBJ,IACjBC,GAGE,KACDK,EAAQG,SACVE,aAAaL,EAAQG,WAGxB,CAACT,EAAOC,EAAOC,GAASU,eAEpBT,CACT"}

package/utils/useElementScrollable/useElementScrollable.js

@@ -1,2 +1,2 @@
-import{useState as e,useCallback as t}from"react";function o(o="y",l){const[r,n]=e(!1);return{isScrollable:r,elementRef:t(e=>{const t=new ResizeObserver(()=>{n("y"===o?e.offsetHeight<e.scrollHeight:e.offsetWidth<e.scrollWidth),null==l||l(e)});null!==e?t.observe(e):t.disconnect()},[])}}export{o as useElementScrollable};
+import{useState as e,useCallback as t}from"react";function o(o="y",r){const[s,l]=e(!1);return{isScrollable:s,elementRef:t(e=>{const t=new ResizeObserver(()=>{l("y"===o?e.offsetHeight<e.scrollHeight:e.offsetWidth<e.scrollWidth),r?.(e)});null!==e?t.observe(e):t.disconnect()},[])}}export{o as useElementScrollable};
 //# sourceMappingURL=useElementScrollable.js.map

package/utils/useElementScrollable/useElementScrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useElementScrollable.js","sources":["../../../src/utils/useElementScrollable/useElementScrollable.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\n/**\n * Monitors an element for scroll.\n *\n * @param axis - horizontal/vertical scroll to monitor @default y\n * @param callback - optional callback\n * @returns The hook returns an object containing:\n *   - {boolean} isScrollable - A boolean indicating if the element is scrollable.\n *   - {Function} elementRef - A callback ref function to be assigned to the element being monitored.\n */\nexport function useElementScrollable(axis: 'x' | 'y' = 'y', callback?: (el: HTMLElement) => void) {\n  const [isScrollable, setIsScrollable] = useState<boolean>(false);\n\n  // monitor overflow while resizing\n  const elementRef = useCallback((element: HTMLElement) => {\n    const resizeObserver = new ResizeObserver(() => {\n      setIsScrollable(\n        axis === 'y' ? element.offsetHeight < element.scrollHeight : element.offsetWidth < element.scrollWidth,\n      );\n      callback?.(element);\n    });\n\n    if (element !== null) {\n      resizeObserver.observe(element);\n    } else {\n      resizeObserver.disconnect();\n    }\n  }, []);\n\n  return { isScrollable, elementRef };\n}\n"],"names":["useElementScrollable","axis","callback","isScrollable","setIsScrollable","useState","elementRef","useCallback","element","resizeObserver","ResizeObserver","offsetHeight","scrollHeight","offsetWidth","scrollWidth","observe","disconnect"],"mappings":"2DAWgBA,EAAqBC,EAAkB,IAAKC,GAC1D,MAAOC,EAAcC,GAAmBC,GAAkB,GAkB1D,MAAO,CAAEF,eAAcG,WAfJC,EAAaC,IAC9B,MAAMC,EAAiB,IAAIC,eAAe,KACxCN,EACW,MAATH,EAAeO,EAAQG,aAAeH,EAAQI,aAAeJ,EAAQK,YAAcL,EAAQM,aAE7FZ,SAAAA,EAAWM,KAGG,OAAZA,EACFC,EAAeM,QAAQP,GAEvBC,EAAeO,cAEhB,IAGL"}
+{"version":3,"file":"useElementScrollable.js","sources":["../../../src/utils/useElementScrollable/useElementScrollable.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\n/**\n * Monitors an element for scroll.\n *\n * @param axis - horizontal/vertical scroll to monitor @default y\n * @param callback - optional callback\n * @returns The hook returns an object containing:\n *   - {boolean} isScrollable - A boolean indicating if the element is scrollable.\n *   - {Function} elementRef - A callback ref function to be assigned to the element being monitored.\n */\nexport function useElementScrollable(axis: 'x' | 'y' = 'y', callback?: (el: HTMLElement) => void) {\n  const [isScrollable, setIsScrollable] = useState<boolean>(false);\n\n  // monitor overflow while resizing\n  const elementRef = useCallback((element: HTMLElement) => {\n    const resizeObserver = new ResizeObserver(() => {\n      setIsScrollable(\n        axis === 'y' ? element.offsetHeight < element.scrollHeight : element.offsetWidth < element.scrollWidth,\n      );\n      callback?.(element);\n    });\n\n    if (element !== null) {\n      resizeObserver.observe(element);\n    } else {\n      resizeObserver.disconnect();\n    }\n  }, []);\n\n  return { isScrollable, elementRef };\n}\n"],"names":["useElementScrollable","axis","callback","isScrollable","setIsScrollable","useState","elementRef","useCallback","element","resizeObserver","ResizeObserver","offsetHeight","scrollHeight","offsetWidth","scrollWidth","observe","disconnect"],"mappings":"2DAWgBA,EAAqBC,EAAkB,IAAKC,GAC1D,MAAOC,EAAcC,GAAmBC,GAAkB,GAkB1D,MAAO,CAAEF,eAAcG,WAfJC,EAAaC,IAC9B,MAAMC,EAAiB,IAAIC,eAAe,KACxCN,EACW,MAATH,EAAeO,EAAQG,aAAeH,EAAQI,aAAeJ,EAAQK,YAAcL,EAAQM,aAE7FZ,IAAWM,KAGG,OAAZA,EACFC,EAAeM,QAAQP,GAEvBC,EAAeO,cAEhB,IAGL"}

package/cjs/materialui/textfield/textfield.component.d.ts

@@ -1,3 +0,0 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-export type TextFieldProps = MuiTextFieldProps;
-export declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/materialui/textfield/textfield.component.d.ts

@@ -1,3 +0,0 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-export type TextFieldProps = MuiTextFieldProps;
-export declare const TextField: (props: TextFieldProps) => import("react/jsx-runtime").JSX.Element;