@basic-ui/material 1.0.0-alpha.1 → 1.0.0-alpha.12

package/build/esm/Ripple/RippleBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/RippleBox.tsx"],"names":["forwardRef","React","useRippleSurface","Box","RippleBox","props","forwardedRef","as","__css","onKeyDown","onPointerDown","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","center","disabled","rippleEnabled","style","otherProps","rippleCss","rippleProps"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAOA,OAAO,IAAMC,SAIG,gBAAGJ,UAAU,CAC3B,SAASI,SAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAwC;AAAA,kBAkBlCD,KAlBkC,CAEpCE,EAFoC;AAAA,MAEpCA,EAFoC,0BAE/B,KAF+B;AAAA,MAGpCC,KAHoC,GAkBlCH,KAlBkC,CAGpCG,KAHoC;AAAA,MAMpCC,SANoC,GAkBlCJ,KAlBkC,CAMpCI,SANoC;AAAA,MAOpCC,aAPoC,GAkBlCL,KAlBkC,CAOpCK,aAPoC;AAAA,MAQpCC,WARoC,GAkBlCN,KAlBkC,CAQpCM,WARoC;AAAA,MASpCC,YAToC,GAkBlCP,KAlBkC,CASpCO,YAToC;AAAA,MAUpCC,YAVoC,GAkBlCR,KAlBkC,CAUpCQ,YAVoC;AAAA,MAWpCC,cAXoC,GAkBlCT,KAlBkC,CAWpCS,cAXoC;AAAA,MAYpCC,WAZoC,GAkBlCV,KAlBkC,CAYpCU,WAZoC;AAAA,MAapCC,MAboC,GAkBlCX,KAlBkC,CAapCW,MAboC;AAAA,MAcpCC,QAdoC,GAkBlCZ,KAlBkC,CAcpCY,QAdoC;AAAA,MAepCC,aAfoC,GAkBlCb,KAlBkC,CAepCa,aAfoC;AAAA,MAgBpCC,KAhBoC,GAkBlCd,KAlBkC,CAgBpCc,KAhBoC;AAAA,MAiBjCC,UAjBiC,4BAkBlCf,KAlBkC;;AAAA,0BAoBOH,gBAAgB,CAACG,KAAD,CApBvB;AAAA,MAoBvBgB,SApBuB,qBAoB9Bb,KApB8B;AAAA,MAoBTc,WApBS;;AAsBtC,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEf,EADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,eAAOe,SAAP,EAAqBb,KAArB,CAHP;AAIQS,IAAAA,QAAQ,EAARA;AAJR,KAKMG,UALN,EAMME,WANN,EADF;AAUD,CAjC0B,CAJtB","sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\n\nimport type { UseRippleSurfaceOptions } from './useRippleSurface';\nimport { useRippleSurface } from './useRippleSurface';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type RippleBoxProps<\n  H extends HTMLElement = HTMLDivElement,\n  Attr = React.HTMLAttributes<H>\n> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;\n\nexport const RippleBox: <\n  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>\n>(\n  props: Props\n) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(\n  function RippleBox(props, forwardedRef) {\n    const {\n      as = 'div',\n      __css,\n      // Cherry picking the ripple props to prevent it from falling down to\n      // the Box component\n      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      center, // eslint-disable-line @typescript-eslint/no-unused-vars\n      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      style, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...otherProps\n    } = props;\n\n    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);\n\n    return (\n      <Box\n        as={as}\n        ref={forwardedRef}\n        __css={{ ...rippleCss, ...__css }}\n        {...{ disabled }}\n        {...otherProps}\n        {...rippleProps}\n      />\n    );\n  }\n) as any;\n"],"file":"RippleBox.js"}
+{"version":3,"file":"RippleBox.js","names":["forwardRef","useRippleSurface","Box","RippleBox","props","forwardedRef","as","__css","onKeyDown","onPointerDown","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","center","disabled","rippleEnabled","style","otherProps","rippleCss","rippleProps"],"sources":["../../../src/Ripple/RippleBox.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UseRippleSurfaceOptions } from './useRippleSurface';\nimport { useRippleSurface } from './useRippleSurface';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type RippleBoxProps<\n  H extends HTMLElement = HTMLDivElement,\n  Attr = HTMLAttributes<H>\n> = BoxProps<H, Attr> & UseRippleSurfaceOptions<H>;\n\nexport const RippleBox: <\n  Props = RippleBoxProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>>\n>(\n  props: Props\n) => JSX.Element = forwardRef<HTMLDivElement, RippleBoxProps>(\n  function RippleBox(props, forwardedRef) {\n    const {\n      as = 'div',\n      __css,\n      // Cherry picking the ripple props to prevent it from falling down to\n      // the Box component\n      onKeyDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      onPointerDown, // eslint-disable-line @typescript-eslint/no-unused-vars\n      baseOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      hoverOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      focusOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      pressedOpacity, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleColor, // eslint-disable-line @typescript-eslint/no-unused-vars\n      center, // eslint-disable-line @typescript-eslint/no-unused-vars\n      disabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      rippleEnabled, // eslint-disable-line @typescript-eslint/no-unused-vars\n      style, // eslint-disable-line @typescript-eslint/no-unused-vars\n      ...otherProps\n    } = props;\n\n    const { __css: rippleCss, ...rippleProps } = useRippleSurface(props);\n\n    return (\n      <Box\n        as={as}\n        ref={forwardedRef}\n        __css={{ ...rippleCss, ...__css }}\n        {...{ disabled }}\n        {...otherProps}\n        {...rippleProps}\n      />\n    );\n  }\n) as any;\n"],"mappings":";;;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,gBAAT,QAAiC,oBAAjC;AAEA,SAASC,GAAT,QAAoB,QAApB;;AAOA,OAAO,IAAMC,SAIG,gBAAGH,UAAU,CAC3B,SAASG,SAAT,CAAmBC,KAAnB,EAA0BC,YAA1B,EAAwC;EACtC,gBAiBID,KAjBJ,CACEE,EADF;EAAA,IACEA,EADF,0BACO,KADP;EAAA,IAEEC,KAFF,GAiBIH,KAjBJ,CAEEG,KAFF;EAAA,IAKEC,SALF,GAiBIJ,KAjBJ,CAKEI,SALF;EAAA,IAMEC,aANF,GAiBIL,KAjBJ,CAMEK,aANF;EAAA,IAOEC,WAPF,GAiBIN,KAjBJ,CAOEM,WAPF;EAAA,IAQEC,YARF,GAiBIP,KAjBJ,CAQEO,YARF;EAAA,IASEC,YATF,GAiBIR,KAjBJ,CASEQ,YATF;EAAA,IAUEC,cAVF,GAiBIT,KAjBJ,CAUES,cAVF;EAAA,IAWEC,WAXF,GAiBIV,KAjBJ,CAWEU,WAXF;EAAA,IAYEC,MAZF,GAiBIX,KAjBJ,CAYEW,MAZF;EAAA,IAaEC,QAbF,GAiBIZ,KAjBJ,CAaEY,QAbF;EAAA,IAcEC,aAdF,GAiBIb,KAjBJ,CAcEa,aAdF;EAAA,IAeEC,KAfF,GAiBId,KAjBJ,CAeEc,KAfF;EAAA,IAgBKC,UAhBL,4BAiBIf,KAjBJ;;EAmBA,wBAA6CH,gBAAgB,CAACG,KAAD,CAA7D;EAAA,IAAegB,SAAf,qBAAQb,KAAR;EAAA,IAA6Bc,WAA7B;;EAEA,oBACE,KAAC,GAAD;IACE,EAAE,EAAEf,EADN;IAEE,GAAG,EAAED,YAFP;IAGE,KAAK,wBAAOe,SAAP,GAAqBb,KAArB,CAHP;IAIQS,QAAQ,EAARA;EAJR,GAKMG,UALN,GAMME,WANN,EADF;AAUD,CAjC0B,CAJtB"}

package/build/esm/Ripple/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/constants.ts"],"names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,IAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,IAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,IAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,IAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,IAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,IAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,IAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB","sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"file":"constants.js"}
+{"version":3,"file":"constants.js","names":["hash","RIPPLE_BACKGROUND_COLOR","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_SCALE_END","RIPPLE_OPACITY_END","RIPPLE_SIZE","RIPPLE_POSITION"],"sources":["../../../src/Ripple/constants.ts"],"sourcesContent":["import hash from '@emotion/hash';\n\nexport const RIPPLE_BACKGROUND_COLOR = `--css-${hash(\n  'basic-ui-ripple-fg-bg-color'\n)}`;\nexport const RIPPLE_TRANSLATE_START = `--css-${hash(\n  'basic-ui-ripple-fg-translate-start'\n)}`;\nexport const RIPPLE_TRANSLATE_END = `--css-${hash(\n  'basic-ui-ripple-fg-translate-end'\n)}`;\nexport const RIPPLE_SCALE_END = `--css-${hash('basic-ui-ripple-fg-scale')}`;\nexport const RIPPLE_OPACITY_END = `--css-${hash('basic-ui-ripple-fg-opacity')}`;\nexport const RIPPLE_SIZE = `--css-${hash('basic-ui-ripple-fg-size')}`;\nexport const RIPPLE_POSITION = `--css-${hash('basic-ui-ripple-fg-position')}`;\n"],"mappings":"AAAA,OAAOA,IAAP,MAAiB,eAAjB;AAEA,OAAO,IAAMC,uBAAuB,mBAAYD,IAAI,CAClD,6BADkD,CAAhB,CAA7B;AAGP,OAAO,IAAME,sBAAsB,mBAAYF,IAAI,CACjD,oCADiD,CAAhB,CAA5B;AAGP,OAAO,IAAMG,oBAAoB,mBAAYH,IAAI,CAC/C,kCAD+C,CAAhB,CAA1B;AAGP,OAAO,IAAMI,gBAAgB,mBAAYJ,IAAI,CAAC,0BAAD,CAAhB,CAAtB;AACP,OAAO,IAAMK,kBAAkB,mBAAYL,IAAI,CAAC,4BAAD,CAAhB,CAAxB;AACP,OAAO,IAAMM,WAAW,mBAAYN,IAAI,CAAC,yBAAD,CAAhB,CAAjB;AACP,OAAO,IAAMO,eAAe,mBAAYP,IAAI,CAAC,6BAAD,CAAhB,CAArB"}

package/build/esm/Ripple/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd","sourcesContent":["export * from './Ripple';\nexport * from './RippleBox';\nexport * from './useRipple';\nexport * from './useRippleHandlers';\nexport * from './useRippleSurface';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Ripple/index.ts"],"sourcesContent":["export * from './Ripple';\nexport * from './RippleBox';\nexport * from './useRipple';\nexport * from './useRippleHandlers';\nexport * from './useRippleSurface';\n"],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,aAAd;AACA,cAAc,qBAAd;AACA,cAAc,oBAAd"}

package/build/esm/Ripple/keyframes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/keyframes.ts"],"names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAGA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,IAAMC,QAAmB,GAAGL,SAAS,CAAC;AAC3CM,EAAAA,IAAI,EAAE;AACJC,IAAAA,SAAS,0BAAmBN,sBAAnB;AADL,GADqC;AAI3CO,EAAAA,EAAE,EAAE;AACFD,IAAAA,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;AADP;AAJuC,CAAD,CAArC;AASP,OAAO,IAAMK,SAAoB,GAAGT,SAAS,CAAC;AAC5CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,EAAE;AADL,GADsC;AAI5CF,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,gBAASP,kBAAT;AADL;AAJwC,CAAD,CAAtC;AASP,OAAO,IAAMQ,UAAqB,GAAGX,SAAS,CAAC;AAC7CM,EAAAA,IAAI,EAAE;AACJI,IAAAA,OAAO,gBAASP,kBAAT;AADH,GADuC;AAI7CK,EAAAA,EAAE,EAAE;AACFE,IAAAA,OAAO,EAAE;AADP;AAJyC,CAAD,CAAvC","sourcesContent":["import { keyframes } from '@emotion/react';\nimport type { Keyframes } from '@emotion/serialize';\n\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"file":"keyframes.js"}
+{"version":3,"file":"keyframes.js","names":["keyframes","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","radiusIn","from","transform","to","opacityIn","opacity","opacityOut"],"sources":["../../../src/Ripple/keyframes.ts"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport type { Keyframes } from '@emotion/serialize';\n\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n} from './constants';\n\nexport const radiusIn: Keyframes = keyframes({\n  from: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_START}, 0)) scale(1)`,\n  },\n  to: {\n    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,\n  },\n});\n\nexport const opacityIn: Keyframes = keyframes({\n  from: {\n    opacity: '0',\n  },\n  to: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n});\n\nexport const opacityOut: Keyframes = keyframes({\n  from: {\n    opacity: `var(${RIPPLE_OPACITY_END})`,\n  },\n  to: {\n    opacity: '0',\n  },\n});\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAGA,SACEC,sBADF,EAEEC,oBAFF,EAGEC,kBAHF,EAIEC,gBAJF,QAKO,aALP;AAOA,OAAO,IAAMC,QAAmB,GAAGL,SAAS,CAAC;EAC3CM,IAAI,EAAE;IACJC,SAAS,0BAAmBN,sBAAnB;EADL,CADqC;EAI3CO,EAAE,EAAE;IACFD,SAAS,0BAAmBL,oBAAnB,6BAA0DE,gBAA1D;EADP;AAJuC,CAAD,CAArC;AASP,OAAO,IAAMK,SAAoB,GAAGT,SAAS,CAAC;EAC5CM,IAAI,EAAE;IACJI,OAAO,EAAE;EADL,CADsC;EAI5CF,EAAE,EAAE;IACFE,OAAO,gBAASP,kBAAT;EADL;AAJwC,CAAD,CAAtC;AASP,OAAO,IAAMQ,UAAqB,GAAGX,SAAS,CAAC;EAC7CM,IAAI,EAAE;IACJI,OAAO,gBAASP,kBAAT;EADH,CADuC;EAI7CK,EAAE,EAAE;IACFE,OAAO,EAAE;EADP;AAJyC,CAAD,CAAvC"}

package/build/esm/Ripple/useRipple.js

@@ -47,9 +47,9 @@ function calculateRipplePosition(rect, clientX, clientY) {
     x: clientX - rect.left,
     y: clientY - rect.top
   };
-  return _extends({
+  return _extends(_extends({
     state: 'entering'
-  }, rippleStart, getScale(rect));
+  }, rippleStart), getScale(rect));
 }
 
 export var useRipple = function useRipple(opts) {

package/build/esm/Ripple/useRipple.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRipple.ts"],"names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","undefined","style"],"mappings":"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","sourcesContent":["import { useState, useRef, useEffect } from 'react';\n\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n  RIPPLE_SIZE,\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_POSITION,\n} from './constants';\n\nconst defaultRipple = {\n  x: 0,\n  y: 0,\n  size: 0,\n  scale: 0,\n  centerX: 0,\n  centerY: 0,\n};\n\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\n// `overflow: hidden`.\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\n  const hypotenuse = Math.sqrt(\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\n  );\n  return hypotenuse + padding;\n};\n\nfunction getScale(rect: ClientRect) {\n  const maxDim = Math.max(rect.height, rect.width);\n  const padding = 10;\n  const initialOriginScale = 0.6;\n  const maxRadius = getBoundedRadius(rect, padding);\n\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\n  const initialSize = Math.floor(maxDim * initialOriginScale);\n\n  return {\n    size: initialSize,\n    scale: maxRadius / initialSize,\n    centerX: rect.width / 2,\n    centerY: rect.height / 2,\n  };\n}\n\nfunction calculateRipplePosition(\n  rect: ClientRect,\n  clientX: number,\n  clientY: number,\n  center = false\n) {\n  const rippleStart = center\n    ? {\n        x: rect.width / 2,\n        y: rect.height / 2,\n      }\n    : {\n        x: clientX - rect.left,\n        y: clientY - rect.top,\n      };\n\n  return {\n    state: 'entering' as const,\n    ...rippleStart,\n    ...getScale(rect),\n  };\n}\n\nexport interface RippleOptions {\n  opacity: number;\n  backgroundColor: string;\n  enterDuration?: number;\n  leaveDuration?: number;\n  center?: boolean;\n  disabled?: boolean;\n}\n\nexport const useRipple = (opts: RippleOptions) => {\n  const {\n    opacity,\n    backgroundColor,\n    enterDuration = 225,\n    leaveDuration = 150,\n  } = opts;\n\n  // rippleState must be a ref, because it accesses the current value\n  // inside closures... if we use state, it's gonna recapture\n  // the state variable and won't work correctly\n  const rippleState = useRef(\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\n  );\n  const [ripple, setRipple] = useState(defaultRipple);\n  const leavingTimeout = useRef<number>();\n  const enteringTimeout = useRef<number>();\n  const restartTimeout = useRef<number>();\n\n  const shouldLeave = useRef(false);\n\n  // clear timeouts to avoid setting state on unmounted component\n  useEffect(() => {\n    return () => {\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\n      clearTimeout(enteringTimeout.current);\n      clearTimeout(leavingTimeout.current);\n    };\n  }, []);\n\n  // State handling\n  const setLeft = () => {\n    rippleState.current = 'left';\n    setRipple({ ...defaultRipple });\n  };\n\n  const setLeaving = () => {\n    clearTimeout(enteringTimeout.current);\n    rippleState.current = 'leaving';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\n  };\n\n  const setEntered = () => {\n    rippleState.current = 'entered';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    if (shouldLeave.current) {\n      setLeaving();\n    }\n  };\n\n  const deactivate = () => {\n    shouldLeave.current = true;\n    if (rippleState.current === 'entered') {\n      setLeaving();\n    }\n  };\n\n  const activate = (\n    rect: ClientRect,\n    clientX: number,\n    clientY: number,\n    center = false\n  ) => {\n    clearTimeout(leavingTimeout.current);\n    clearTimeout(enteringTimeout.current);\n    shouldLeave.current = false;\n\n    rippleState.current = 'restart';\n    setRipple({ ...defaultRipple });\n    restartTimeout.current = requestAnimationFrame(() => {\n      rippleState.current = 'entering';\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\n\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\n    });\n  };\n\n  // Styling\n  let animation: string | undefined = undefined;\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\n      break;\n    case 'leaving':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityOut} ${leaveDuration}ms forwards`;\n      break;\n  }\n\n  let style = {};\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n    case 'leaving':\n      style = {\n        [RIPPLE_SIZE]: `${ripple.size}px`,\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\n        [RIPPLE_OPACITY_END]: opacity,\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\n      };\n      break;\n  }\n\n  return {\n    activate,\n    deactivate,\n    style,\n    animation,\n    // key: counter,\n  };\n};\n"],"file":"useRipple.js"}
+{"version":3,"file":"useRipple.js","names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","undefined","style"],"sources":["../../../src/Ripple/useRipple.ts"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\n\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n  RIPPLE_SIZE,\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_POSITION,\n} from './constants';\n\nconst defaultRipple = {\n  x: 0,\n  y: 0,\n  size: 0,\n  scale: 0,\n  centerX: 0,\n  centerY: 0,\n};\n\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\n// `overflow: hidden`.\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\n  const hypotenuse = Math.sqrt(\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\n  );\n  return hypotenuse + padding;\n};\n\nfunction getScale(rect: ClientRect) {\n  const maxDim = Math.max(rect.height, rect.width);\n  const padding = 10;\n  const initialOriginScale = 0.6;\n  const maxRadius = getBoundedRadius(rect, padding);\n\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\n  const initialSize = Math.floor(maxDim * initialOriginScale);\n\n  return {\n    size: initialSize,\n    scale: maxRadius / initialSize,\n    centerX: rect.width / 2,\n    centerY: rect.height / 2,\n  };\n}\n\nfunction calculateRipplePosition(\n  rect: ClientRect,\n  clientX: number,\n  clientY: number,\n  center = false\n) {\n  const rippleStart = center\n    ? {\n        x: rect.width / 2,\n        y: rect.height / 2,\n      }\n    : {\n        x: clientX - rect.left,\n        y: clientY - rect.top,\n      };\n\n  return {\n    state: 'entering' as const,\n    ...rippleStart,\n    ...getScale(rect),\n  };\n}\n\nexport interface RippleOptions {\n  opacity: number;\n  backgroundColor: string;\n  enterDuration?: number;\n  leaveDuration?: number;\n  center?: boolean;\n  disabled?: boolean;\n}\n\nexport const useRipple = (opts: RippleOptions) => {\n  const {\n    opacity,\n    backgroundColor,\n    enterDuration = 225,\n    leaveDuration = 150,\n  } = opts;\n\n  // rippleState must be a ref, because it accesses the current value\n  // inside closures... if we use state, it's gonna recapture\n  // the state variable and won't work correctly\n  const rippleState = useRef(\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\n  );\n  const [ripple, setRipple] = useState(defaultRipple);\n  const leavingTimeout = useRef<number>();\n  const enteringTimeout = useRef<number>();\n  const restartTimeout = useRef<number>();\n\n  const shouldLeave = useRef(false);\n\n  // clear timeouts to avoid setting state on unmounted component\n  useEffect(() => {\n    return () => {\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\n      clearTimeout(enteringTimeout.current);\n      clearTimeout(leavingTimeout.current);\n    };\n  }, []);\n\n  // State handling\n  const setLeft = () => {\n    rippleState.current = 'left';\n    setRipple({ ...defaultRipple });\n  };\n\n  const setLeaving = () => {\n    clearTimeout(enteringTimeout.current);\n    rippleState.current = 'leaving';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\n  };\n\n  const setEntered = () => {\n    rippleState.current = 'entered';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    if (shouldLeave.current) {\n      setLeaving();\n    }\n  };\n\n  const deactivate = () => {\n    shouldLeave.current = true;\n    if (rippleState.current === 'entered') {\n      setLeaving();\n    }\n  };\n\n  const activate = (\n    rect: ClientRect,\n    clientX: number,\n    clientY: number,\n    center = false\n  ) => {\n    clearTimeout(leavingTimeout.current);\n    clearTimeout(enteringTimeout.current);\n    shouldLeave.current = false;\n\n    rippleState.current = 'restart';\n    setRipple({ ...defaultRipple });\n    restartTimeout.current = requestAnimationFrame(() => {\n      rippleState.current = 'entering';\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\n\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\n    });\n  };\n\n  // Styling\n  let animation: string | undefined = undefined;\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\n      break;\n    case 'leaving':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityOut} ${leaveDuration}ms forwards`;\n      break;\n  }\n\n  let style = {};\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n    case 'leaving':\n      style = {\n        [RIPPLE_SIZE]: `${ripple.size}px`,\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\n        [RIPPLE_OPACITY_END]: opacity,\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\n      };\n      break;\n  }\n\n  return {\n    activate,\n    deactivate,\n    style,\n    animation,\n    // key: counter,\n  };\n};\n"],"mappings":"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"}

package/build/esm/Ripple/useRippleHandlers.d.ts

@@ -1,8 +1,8 @@
-import type * as React from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
 import type { RippleOptions } from './useRipple';
 export declare function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions): {
     style: {};
     animation: string | undefined;
-    handleKeyDown: (e: React.KeyboardEvent<T>) => void;
-    handlePointerDown: (e: React.PointerEvent<T>) => void;
+    handleKeyDown: (e: ReactKeyboardEvent<T>) => void;
+    handlePointerDown: (e: PointerEvent<T>) => void;
 };

package/build/esm/Ripple/useRippleHandlers.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["activate", "deactivate"];
 import { useRef } from 'react';
 import { useRipple } from './useRipple';
 
@@ -11,7 +12,7 @@ export function useRippleHandlers(opts) {
   var _useRipple = useRipple(opts),
       activate = _useRipple.activate,
       deactivate = _useRipple.deactivate,
-      rest = _objectWithoutProperties(_useRipple, ["activate", "deactivate"]); // Pointer activation
+      rest = _objectWithoutProperties(_useRipple, _excluded); // Pointer activation
 
 
   var handlePointerUp = function handlePointerUp() {

package/build/esm/Ripple/useRippleHandlers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleHandlers.ts"],"names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"mappings":";;AAAA,SAASA,MAAT,QAAuB,OAAvB;AAIA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;AAAA,mBAClCH,SAAS,CAACG,IAAD,CADyB;AAAA,MACpEC,QADoE,cACpEA,QADoE;AAAA,MAC1DC,UAD0D,cAC1DA,UAD0D;AAAA,MAC3CC,IAD2C,qEAG5E;;;AACA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AAC5BC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;AACAC,IAAAA,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;AACAF,IAAAA,UAAU;AACX,GAJD;;AAMA,MAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAA8B;AACtD,QAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAV,IAAAA,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;AACAT,IAAAA,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;AACAC,IAAAA,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;AACD,GALD,CAV4E,CAiB5E;;;AACA,MAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;AACA,MAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;AACxC,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;AACjB;AACD;;AACDb,IAAAA,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;AACAD,IAAAA,WAAW,CAACG,OAAZ,GAAsB,IAAtB;AACAjB,IAAAA,UAAU;AACX,GAPD;;AASA,MAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA+B;AACnD,QAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;AACzC;AACD;;AACD,QAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;AACAK,IAAAA,WAAW,CAACG,OAAZ,GAAsB,KAAtB;AACAlB,IAAAA,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;AACAJ,IAAAA,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;AACD,GARD;;AAUA;AACEG,IAAAA,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;AAEEb,IAAAA,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;AAFvD,KAGKJ,IAHL;AAKD","sourcesContent":["import { useRef } from 'react';\nimport type * as React from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: React.PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"file":"useRippleHandlers.js"}
+{"version":3,"file":"useRippleHandlers.js","names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"sources":["../../../src/Ripple/useRippleHandlers.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';\nimport { useRef } from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"mappings":";;;AACA,SAASA,MAAT,QAAuB,OAAvB;AAGA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;EAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;EAC5E,iBAA0CH,SAAS,CAACG,IAAD,CAAnD;EAAA,IAAQC,QAAR,cAAQA,QAAR;EAAA,IAAkBC,UAAlB,cAAkBA,UAAlB;EAAA,IAAiCC,IAAjC,mDAD4E,CAG5E;;;EACA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;IAC5BC,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;IACAC,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;IACAF,UAAU;EACX,CAJD;;EAMA,IAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAwB;IAChD,IAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;IACAV,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;IACAT,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;IACAC,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;EACD,CALD,CAV4E,CAiB5E;;;EACA,IAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;EACA,IAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;IACxC,IAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;MACjB;IACD;;IACDb,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;IACAD,WAAW,CAACG,OAAZ,GAAsB,IAAtB;IACAjB,UAAU;EACX,CAPD;;EASA,IAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA8B;IAClD,IAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;MACzC;IACD;;IACD,IAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;IACAK,WAAW,CAACG,OAAZ,GAAsB,KAAtB;IACAlB,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;IACAJ,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;EACD,CARD;;EAUA;IACEG,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;IAEEb,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;EAFvD,GAGKJ,IAHL;AAKD"}

package/build/esm/Ripple/useRippleSurface.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'react';
+import type { CSSProperties, KeyboardEventHandler, PointerEventHandler } from 'react';
 export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     baseOpacity?: number;
     hoverOpacity?: number;
@@ -9,10 +9,10 @@ export interface UseRippleSurfaceOptions<T extends HTMLElement> {
     center?: boolean;
     disabled?: boolean;
     style?: CSSProperties;
-    onPointerDown?: React.PointerEventHandler<T>;
-    onKeyDown?: React.KeyboardEventHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<T>;
 }
-export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleSurfaceOptions<T>): {
+export declare function useRippleSurface<T extends HTMLElement>(opts?: UseRippleSurfaceOptions<T>): {
     style: {
         alignContent?: import("csstype").Property.AlignContent | undefined;
         alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -782,5 +782,5 @@ export declare function useRippleSurface<T extends HTMLElement>(opts: UseRippleS
     };
     onKeyDown: import("@basic-ui/core").CustomEventHandler<import("react").KeyboardEvent<T>, []>;
     onPointerDown: import("@basic-ui/core").CustomEventHandler<import("react").PointerEvent<T>, []>;
-    __css: Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
+    __css: import("@styled-system/css").SystemCssProperties | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number> | Record<string, import("@styled-system/css").SystemStyleObject | import("@styled-system/css").ResponsiveStyleValue<string | number>>>;
 };

package/build/esm/Ripple/useRippleSurface.js

@@ -1,14 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"];
+import { useMemo } from 'react';
 import { get } from '@styled-system/css';
 import { wrapEvent } from '@basic-ui/core';
 import { useTheme } from '../theme';
 import { rippleStyle } from './Ripple';
 import { useRippleHandlers } from './useRippleHandlers';
-export function useRippleSurface(opts) {
-  var _extends2;
-
+export function useRippleSurface() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _opts$baseOpacity = opts.baseOpacity,
       baseOpacity = _opts$baseOpacity === void 0 ? 0 : _opts$baseOpacity,
       _opts$hoverOpacity = opts.hoverOpacity,
@@ -27,7 +28,7 @@ export function useRippleSurface(opts) {
       disabled = opts.disabled,
       _opts$rippleEnabled = opts.rippleEnabled,
       rippleEnabled = _opts$rippleEnabled === void 0 ? true : _opts$rippleEnabled,
-      rippleProps = _objectWithoutProperties(opts, ["onKeyDown", "onPointerDown", "style", "disabled", "rippleEnabled"]);
+      rippleProps = _objectWithoutProperties(opts, _excluded);
 
   var theme = useTheme();
   rippleColor = get(theme, "colors.".concat(rippleColor)) || rippleColor;
@@ -48,64 +49,67 @@ export function useRippleSurface(opts) {
       animationStyle = _useRippleHandlers.style,
       animation = _useRippleHandlers.animation;
 
-  var css = _extends({
-    overflow: 'hidden',
-    position: 'relative',
-    cursor: 'pointer',
-    // fix overflow: hidden + borderRadius in Safari
-    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
-    willChange: 'transform,opacity',
-    WebkitTapHighlightColor: 'transparent',
-    // ripple overlay
-    '&::before': {
-      backgroundColor: rippleColor,
-      boxSizing: 'content-box',
-      position: 'absolute',
-      content: '""',
-      opacity: baseOpacity,
-      pointerEvents: 'none',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      transition: 'opacity 75ms linear'
-    },
-    '&:hover::before': {
-      opacity: hoverOpacity
-    },
-    '&:focus-visible::before': {
-      opacity: focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&:active::before': {
-      opacity: pressedOpacity
-    }
-  }, {
-    '&[aria-pressed="true"]::before': {
-      opacity: baseOpacity + pressedOpacity
-    },
-    '&[aria-pressed="true"]:hover::before': {
-      opacity: pressedOpacity + hoverOpacity
-    },
-    '&[aria-pressed="true"]:focus-visible::before': {
-      opacity: pressedOpacity + focusOpacity
-    }
-  }, !rippleEnabled && {
-    '&[aria-pressed="true"]:active::before': {
-      opacity: pressedOpacity + pressedOpacity
-    }
-  }, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
-    opacity: 0
-  }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
-    cursor: 'default'
-  }), _extends2), rippleEnabled && {
-    '&::after': _extends({}, rippleStyle({
-      animation: animation
-    }))
-  });
+  var css = useMemo(function () {
+    var _extends2;
 
+    return _extends(_extends(_extends({
+      overflow: 'hidden',
+      position: 'relative',
+      cursor: 'pointer',
+      // fix overflow: hidden + borderRadius in Safari
+      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479
+      willChange: 'transform,opacity',
+      WebkitTapHighlightColor: 'transparent',
+      // ripple overlay
+      '&::before': {
+        backgroundColor: rippleColor,
+        boxSizing: 'content-box',
+        position: 'absolute',
+        content: '""',
+        opacity: baseOpacity,
+        pointerEvents: 'none',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        transition: 'opacity 75ms linear'
+      },
+      '&:hover::before': {
+        opacity: hoverOpacity
+      },
+      '&:focus-visible::before': {
+        opacity: focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&:active::before': {
+        opacity: pressedOpacity
+      }
+    }), {}, {
+      '&[aria-pressed="true"]::before': {
+        opacity: baseOpacity + pressedOpacity
+      },
+      '&[aria-pressed="true"]:hover::before': {
+        opacity: pressedOpacity + hoverOpacity
+      },
+      '&[aria-pressed="true"]:focus-visible::before': {
+        opacity: pressedOpacity + focusOpacity
+      }
+    }, !rippleEnabled && {
+      '&[aria-pressed="true"]:active::before': {
+        opacity: pressedOpacity + pressedOpacity
+      }
+    }), {}, (_extends2 = {}, _defineProperty(_extends2, '&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' + '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' + '&[data-disabled]:active::before,&:disabled[aria-pressed="true"]::before', {
+      opacity: 0
+    }), _defineProperty(_extends2, '&:disabled,&[data-disabled]', {
+      cursor: 'default'
+    }), _extends2), rippleEnabled && {
+      '&::after': _extends({}, rippleStyle({
+        animation: animation
+      }))
+    });
+  }, [animation, baseOpacity, focusOpacity, hoverOpacity, pressedOpacity, rippleColor, rippleEnabled]);
   return {
-    style: _extends({}, animationStyle, style),
+    style: _extends(_extends({}, animationStyle), style),
     onKeyDown: wrapEvent(onKeyDown, handleKeyDown),
     onPointerDown: wrapEvent(onPointerDown, handlePointerDown),
     __css: css

package/build/esm/Ripple/useRippleSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Ripple/useRippleSurface.ts"],"names":["get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: React.PointerEventHandler<T>;\n  onKeyDown?: React.KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T>\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = {\n    overflow: 'hidden',\n    position: 'relative',\n    cursor: 'pointer',\n    // fix overflow: hidden + borderRadius in Safari\n    // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n    willChange: 'transform,opacity',\n    WebkitTapHighlightColor: 'transparent',\n    // ripple overlay\n    '&::before': {\n      backgroundColor: rippleColor,\n      boxSizing: 'content-box',\n      position: 'absolute',\n      content: '\"\"',\n      opacity: baseOpacity,\n      pointerEvents: 'none',\n      top: '0',\n      left: '0',\n      width: '100%',\n      height: '100%',\n      transition: 'opacity 75ms linear',\n    },\n    '&:hover::before': {\n      opacity: hoverOpacity,\n    },\n    '&:focus-visible::before': {\n      opacity: focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&:active::before': {\n        opacity: pressedOpacity,\n      },\n    }),\n    '&[aria-pressed=\"true\"]::before': {\n      opacity: baseOpacity + pressedOpacity,\n    },\n    '&[aria-pressed=\"true\"]:hover::before': {\n      opacity: pressedOpacity + hoverOpacity,\n    },\n    '&[aria-pressed=\"true\"]:focus-visible::before': {\n      opacity: pressedOpacity + focusOpacity,\n    },\n    ...(!rippleEnabled && {\n      '&[aria-pressed=\"true\"]:active::before': {\n        opacity: pressedOpacity + pressedOpacity,\n      },\n    }),\n    ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n    '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n    '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n      {\n        opacity: 0,\n      },\n    '&:disabled,&[data-disabled]': {\n      cursor: 'default',\n    },\n    // ripple\n    ...(rippleEnabled && {\n      '&::after': { ...rippleStyle({ animation }) },\n    }),\n  };\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"file":"useRippleSurface.js"}
+{"version":3,"file":"useRippleSurface.js","names":["useMemo","get","wrapEvent","useTheme","rippleStyle","useRippleHandlers","useRippleSurface","opts","baseOpacity","hoverOpacity","focusOpacity","pressedOpacity","rippleColor","onKeyDown","onPointerDown","style","disabled","rippleEnabled","rippleProps","theme","opacity","Number","backgroundColor","handleKeyDown","handlePointerDown","animationStyle","animation","css","overflow","position","cursor","willChange","WebkitTapHighlightColor","boxSizing","content","pointerEvents","top","left","width","height","transition","__css"],"sources":["../../../src/Ripple/useRippleSurface.ts"],"sourcesContent":["import type {\n  CSSProperties,\n  KeyboardEventHandler,\n  PointerEventHandler,\n} from 'react';\nimport { useMemo } from 'react';\nimport { get } from '@styled-system/css';\nimport { wrapEvent } from '@basic-ui/core';\n\nimport { useTheme } from '../theme';\nimport { rippleStyle } from './Ripple';\nimport { useRippleHandlers } from './useRippleHandlers';\nimport type { SxStyleProp } from '../Box';\n\nexport interface UseRippleSurfaceOptions<T extends HTMLElement> {\n  baseOpacity?: number;\n  hoverOpacity?: number;\n  focusOpacity?: number;\n  pressedOpacity?: number;\n  rippleColor?: string;\n  rippleEnabled?: boolean;\n  center?: boolean;\n  disabled?: boolean;\n  style?: CSSProperties;\n  onPointerDown?: PointerEventHandler<T>;\n  onKeyDown?: KeyboardEventHandler<T>;\n}\n\nexport function useRippleSurface<T extends HTMLElement>(\n  opts: UseRippleSurfaceOptions<T> = {}\n) {\n  let {\n    // eslint-disable-next-line prefer-const\n    baseOpacity = 0,\n    hoverOpacity = 0.04,\n    focusOpacity = 0.12,\n    pressedOpacity = 0.12,\n    rippleColor = 'on.surface',\n  } = opts;\n  const {\n    onKeyDown,\n    onPointerDown,\n    style = {},\n    disabled,\n    rippleEnabled = true,\n    ...rippleProps\n  } = opts;\n\n  const theme = useTheme();\n  rippleColor = get(theme, `colors.${rippleColor}`) || rippleColor;\n\n  if (disabled) {\n    hoverOpacity = baseOpacity;\n    focusOpacity = baseOpacity;\n    pressedOpacity = baseOpacity;\n  }\n\n  const {\n    handleKeyDown,\n    handlePointerDown,\n    style: animationStyle,\n    animation,\n  } = useRippleHandlers({\n    opacity: Number(pressedOpacity),\n    backgroundColor: rippleColor,\n    disabled,\n    ...rippleProps,\n  });\n\n  const css: SxStyleProp = useMemo(\n    () => ({\n      overflow: 'hidden',\n      position: 'relative',\n      cursor: 'pointer',\n      // fix overflow: hidden + borderRadius in Safari\n      // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b#gistcomment-2359479\n      willChange: 'transform,opacity',\n      WebkitTapHighlightColor: 'transparent',\n      // ripple overlay\n      '&::before': {\n        backgroundColor: rippleColor,\n        boxSizing: 'content-box',\n        position: 'absolute',\n        content: '\"\"',\n        opacity: baseOpacity,\n        pointerEvents: 'none',\n        top: '0',\n        left: '0',\n        width: '100%',\n        height: '100%',\n        transition: 'opacity 75ms linear',\n      },\n      '&:hover::before': {\n        opacity: hoverOpacity,\n      },\n      '&:focus-visible::before': {\n        opacity: focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&:active::before': {\n          opacity: pressedOpacity,\n        },\n      }),\n      '&[aria-pressed=\"true\"]::before': {\n        opacity: baseOpacity + pressedOpacity,\n      },\n      '&[aria-pressed=\"true\"]:hover::before': {\n        opacity: pressedOpacity + hoverOpacity,\n      },\n      '&[aria-pressed=\"true\"]:focus-visible::before': {\n        opacity: pressedOpacity + focusOpacity,\n      },\n      ...(!rippleEnabled && {\n        '&[aria-pressed=\"true\"]:active::before': {\n          opacity: pressedOpacity + pressedOpacity,\n        },\n      }),\n      ['&:disabled::before,&:disabled:hover::before,&:disabled:focus::before,&:disabled:active::before,' +\n      '&[data-disabled]::before,&[data-disabled]:hover::before,&[data-disabled]:focus::before,' +\n      '&[data-disabled]:active::before,&:disabled[aria-pressed=\"true\"]::before']:\n        {\n          opacity: 0,\n        },\n      '&:disabled,&[data-disabled]': {\n        cursor: 'default',\n      },\n      // ripple\n      ...(rippleEnabled && {\n        '&::after': { ...rippleStyle({ animation }) },\n      }),\n    }),\n    [\n      animation,\n      baseOpacity,\n      focusOpacity,\n      hoverOpacity,\n      pressedOpacity,\n      rippleColor,\n      rippleEnabled,\n    ]\n  );\n\n  return {\n    style: { ...animationStyle, ...style },\n    onKeyDown: wrapEvent(onKeyDown, handleKeyDown),\n    onPointerDown: wrapEvent(onPointerDown, handlePointerDown),\n    __css: css,\n  };\n}\n"],"mappings":"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"}

package/build/esm/Select/Select.d.ts

@@ -1,18 +1,18 @@
-import * as React from 'react';
+import type { SelectHTMLAttributes, ReactNode, ChangeEvent } from 'react';
 import type { Theme } from '../theme';
 import type { BoxProps } from '../Box';
-export interface SelectProps extends Omit<BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>, 'value' | 'defaultValue' | 'onChange'> {
+export interface SelectProps extends Omit<BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>, 'value' | 'defaultValue' | 'onChange'> {
     variant?: 'outlined' | 'filled';
     color?: 'primary' | 'secondary';
-    label?: React.ReactNode;
+    label?: ReactNode;
     helperText?: string;
     defaultValue?: string;
     value?: string;
     native?: boolean;
     theme?: Theme;
     error?: boolean | string;
-    onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;
+    onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;
     renderValue?: (value?: string) => string | undefined;
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: ReactNode;
 }
-export declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "children" | "form" | "label" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "value" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "name" | "disabled" | "autoFocus" | "error" | "multiple" | "autoComplete" | "leadingIcon" | "required" | "helperText" | "native" | "renderValue"> & React.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
+export declare const Select: import("react").ForwardRefExoticComponent<Pick<SelectProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "value" | "form" | "label" | "error" | "autoFocus" | "disabled" | "name" | "multiple" | "autoComplete" | "required" | "leadingIcon" | "helperText" | "native" | "renderValue"> & import("react").RefAttributes<HTMLButtonElement | HTMLSelectElement>>;

package/build/esm/Select/Select.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "variant", "color", "value", "defaultValue", "disabled", "error", "label", "placeholder", "helperText", "onChange", "onFocus", "onBlur", "native", "children", "renderValue", "leadingIcon"];
 import { forwardRef, useState, useRef, useEffect, useId } from 'react';
-import * as React from 'react';
 import { wrapEvent, assignMultipleRefs, useControlledState } from '@basic-ui/core';
 import { useTheme } from '../theme';
 import { Select as SelectComp, SelectButton } from './styledComponents';
@@ -48,7 +48,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
       renderValueProp = props.renderValue,
       _props$leadingIcon = props.leadingIcon,
       leadingIcon = _props$leadingIcon === void 0 ? null : _props$leadingIcon,
-      otherProps = _objectWithoutProperties(props, ["id", "variant", "color", "value", "defaultValue", "disabled", "error", "label", "placeholder", "helperText", "onChange", "onFocus", "onBlur", "native", "children", "renderValue", "leadingIcon"]);
+      otherProps = _objectWithoutProperties(props, _excluded);
 
   var _useControlledState = useControlledState(valueProp, onChangeProp, defaultValue, function (setState) {
     return function (e, v) {
@@ -135,7 +135,7 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
           children: [leadingIcon && /*#__PURE__*/_jsx(IconContainer, {
             position: "start",
             children: leadingIcon
-          }), /*#__PURE__*/_jsx(Comp, _extends({
+          }), /*#__PURE__*/_jsx(Comp, _extends(_extends({
             ref: assignMultipleRefs(forwardedRef, buttonRef),
             variant: variant,
             id: inputId,
@@ -151,14 +151,14 @@ export var Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef)
             hasLabel: !!label,
             leadingIcon: Boolean(leadingIcon),
             trailingIcon: true
-          }, otherProps, {
+          }, otherProps), {}, {
             children: native ? children : renderValue(value)
           })), !native && /*#__PURE__*/_jsx(MenuPopover, {
             usePortal: true,
             children: /*#__PURE__*/_jsx(MenuList, {
               defaultActiveItemValue: value,
               style: {
-                minWidth: buttonRef == null ? void 0 : (_buttonRef$current = buttonRef.current) == null ? void 0 : _buttonRef$current.offsetWidth
+                minWidth: buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth
               },
               role: "listbox",
               children: children

package/build/esm/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Select/Select.tsx"],"names":["forwardRef","useState","useRef","useEffect","useId","React","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultRender","Box","IconContainer","componentMap","outlined","filled","props","forwardedRef","idProp","id","variant","color","valueProp","value","defaultValue","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","otherProps","setState","e","v","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","target","currentTarget","dataset","hasError","Boolean","inputId","helperTextId","undefined","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"mappings":"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","sourcesContent":["import { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport * as React from 'react';\nimport {\n  wrapEvent,\n  assignMultipleRefs,\n  useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nexport interface SelectProps\n  extends Omit<\n    BoxProps<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>,\n    'value' | 'defaultValue' | 'onChange'\n  > {\n  variant?: 'outlined' | 'filled';\n  color?: 'primary' | 'secondary';\n  label?: React.ReactNode;\n  helperText?: string;\n  defaultValue?: string;\n  value?: string;\n  native?: boolean;\n  theme?: Theme;\n  error?: boolean | string;\n  onChange?: (e: React.ChangeEvent<HTMLSelectElement>, value: string) => void;\n  renderValue?: (value?: string) => string | undefined;\n  leadingIcon?: React.ReactNode;\n}\n\nexport const Select = forwardRef<\n  HTMLSelectElement | HTMLButtonElement,\n  SelectProps\n>(function Select(props, forwardedRef) {\n  const {\n    id: idProp,\n    variant = 'outlined',\n    color = 'primary',\n    value: valueProp,\n    defaultValue = '',\n    disabled,\n    error = false,\n    label = null,\n    placeholder,\n    helperText: helperTextProp,\n    onChange: onChangeProp,\n    onFocus,\n    onBlur,\n    native = false,\n    children,\n    renderValue: renderValueProp,\n    leadingIcon = null,\n    ...otherProps\n  } = props;\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue,\n    (setState) => (e, v) => {\n      setState(v);\n    }\n  );\n  const [hasFocus, setHasFocus] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n  const [open, setOpen] = useState(false);\n  const fallbackId = useId();\n  const theme = useTheme();\n\n  const Container = componentMap[variant] || OutlinedContainer;\n\n  const handleFocus = () => {\n    setHasFocus(true);\n  };\n\n  const handleBlur = () => {\n    setHasFocus(false);\n  };\n\n  const handleToggle = (e: unknown, isOpen: boolean) => {\n    setOpen(isOpen);\n  };\n\n  const handleOnChange = (e: any) => {\n    onChange &&\n      onChange(\n        e as any,\n        native ? e.target.value : e.currentTarget.dataset.value\n      );\n  };\n\n  const hasError = Boolean(error);\n  const helperText = typeof error === 'string' ? error : helperTextProp;\n\n  const id = idProp || fallbackId;\n  const inputId = `${id}-text-field`;\n  const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n  const renderValue = renderValueProp || makeDefaultRender(children);\n\n  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;\n\n  const Comp: React.ComponentType<any> = native\n    ? (SelectComp as any)\n    : (SelectButton as any);\n\n  useEffect(() => {\n    // right after mounting, if the default value in the select element\n    // is different than the value we have stored in state we need to\n    // update our state to reflect that.\n    if (native && buttonRef.current && buttonRef.current.value !== value) {\n      onChange && onChange({} as any, buttonRef.current.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          forceActive={open}\n          error={hasError}\n          leadingIcon={Boolean(leadingIcon)}\n        >\n          <Menu onChange={handleToggle} open={open}>\n            {leadingIcon && (\n              <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n            )}\n            <Comp\n              ref={assignMultipleRefs(forwardedRef, buttonRef)}\n              variant={variant}\n              id={inputId}\n              onFocus={wrapEvent(onFocus, handleFocus)}\n              onBlur={wrapEvent(onBlur, handleBlur)}\n              onChange={native ? handleOnChange : undefined}\n              value={native ? value : undefined}\n              theme={theme}\n              placeholder={placeholder}\n              disabled={disabled}\n              aria-disabled={disabled ? 'true' : undefined}\n              aria-describedby={helperTextId}\n              hasLabel={!!label}\n              leadingIcon={Boolean(leadingIcon)}\n              trailingIcon={true}\n              {...otherProps}\n            >\n              {native ? children : renderValue(value)}\n            </Comp>\n            {!native && (\n              <MenuPopover usePortal>\n                <MenuList\n                  defaultActiveItemValue={value}\n                  style={{\n                    minWidth: buttonRef?.current?.offsetWidth,\n                  }}\n                  role=\"listbox\"\n                >\n                  {children}\n                </MenuList>\n              </MenuPopover>\n            )}\n          </Menu>\n          <SelectIcon open={open} />\n        </Container>\n\n        <HelperText\n          disabled={disabled}\n          id={helperTextId}\n          leftSide={helperText}\n          error={hasError}\n        />\n      </Box>\n    </SelectProvider>\n  );\n});\n"],"file":"Select.js"}
+{"version":3,"file":"Select.js","names":["forwardRef","useState","useRef","useEffect","useId","wrapEvent","assignMultipleRefs","useControlledState","useTheme","Select","SelectComp","SelectButton","FilledContainer","HelperText","OutlinedContainer","SelectProvider","Menu","MenuPopover","MenuList","SelectIcon","makeDefaultRender","Box","IconContainer","componentMap","outlined","filled","props","forwardedRef","idProp","id","variant","color","valueProp","value","defaultValue","disabled","error","label","placeholder","helperTextProp","helperText","onChangeProp","onChange","onFocus","onBlur","native","children","renderValueProp","renderValue","leadingIcon","otherProps","setState","e","v","hasFocus","setHasFocus","buttonRef","open","setOpen","fallbackId","theme","Container","handleFocus","handleBlur","handleToggle","isOpen","handleOnChange","target","currentTarget","dataset","hasError","Boolean","inputId","helperTextId","undefined","labelIsFloating","Comp","current","onSelect","minWidth","offsetWidth"],"sources":["../../../src/Select/Select.tsx"],"sourcesContent":["import type {\n  SelectHTMLAttributes,\n  ReactNode,\n  ChangeEvent,\n  ComponentType,\n} from 'react';\nimport { forwardRef, useState, useRef, useEffect, useId } from 'react';\nimport {\n  wrapEvent,\n  assignMultipleRefs,\n  useControlledState,\n} from '@basic-ui/core';\n\nimport type { Theme } from '../theme';\nimport { useTheme } from '../theme';\nimport { Select as SelectComp, SelectButton } from './styledComponents';\nimport { FilledContainer } from '../TextField/FilledContainer';\nimport { HelperText } from '../TextField/HelperText';\nimport { OutlinedContainer } from '../TextField/OutlinedContainer';\nimport { SelectProvider } from './context';\nimport { Menu, MenuPopover, MenuList } from '../Menu';\nimport { SelectIcon } from './SelectIcon';\nimport { makeDefaultRender } from './defaultRender';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { IconContainer } from '../TextField/IconContainer';\n\nconst componentMap = {\n  outlined: OutlinedContainer,\n  filled: FilledContainer,\n};\n\nexport interface SelectProps\n  extends Omit<\n    BoxProps<HTMLSelectElement, SelectHTMLAttributes<HTMLSelectElement>>,\n    'value' | 'defaultValue' | 'onChange'\n  > {\n  variant?: 'outlined' | 'filled';\n  color?: 'primary' | 'secondary';\n  label?: ReactNode;\n  helperText?: string;\n  defaultValue?: string;\n  value?: string;\n  native?: boolean;\n  theme?: Theme;\n  error?: boolean | string;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, value: string) => void;\n  renderValue?: (value?: string) => string | undefined;\n  leadingIcon?: ReactNode;\n}\n\nexport const Select = forwardRef<\n  HTMLSelectElement | HTMLButtonElement,\n  SelectProps\n>(function Select(props, forwardedRef) {\n  const {\n    id: idProp,\n    variant = 'outlined',\n    color = 'primary',\n    value: valueProp,\n    defaultValue = '',\n    disabled,\n    error = false,\n    label = null,\n    placeholder,\n    helperText: helperTextProp,\n    onChange: onChangeProp,\n    onFocus,\n    onBlur,\n    native = false,\n    children,\n    renderValue: renderValueProp,\n    leadingIcon = null,\n    ...otherProps\n  } = props;\n  const [value, onChange] = useControlledState(\n    valueProp,\n    onChangeProp,\n    defaultValue,\n    (setState) => (e, v) => {\n      setState(v);\n    }\n  );\n  const [hasFocus, setHasFocus] = useState(false);\n  const buttonRef = useRef<HTMLButtonElement | HTMLSelectElement>();\n  const [open, setOpen] = useState(false);\n  const fallbackId = useId();\n  const theme = useTheme();\n\n  const Container = componentMap[variant] || OutlinedContainer;\n\n  const handleFocus = () => {\n    setHasFocus(true);\n  };\n\n  const handleBlur = () => {\n    setHasFocus(false);\n  };\n\n  const handleToggle = (e: unknown, isOpen: boolean) => {\n    setOpen(isOpen);\n  };\n\n  const handleOnChange = (e: any) => {\n    onChange &&\n      onChange(\n        e as any,\n        native ? e.target.value : e.currentTarget.dataset.value\n      );\n  };\n\n  const hasError = Boolean(error);\n  const helperText = typeof error === 'string' ? error : helperTextProp;\n\n  const id = idProp || fallbackId;\n  const inputId = `${id}-text-field`;\n  const helperTextId = helperText ? `${id}-helper-text` : undefined;\n\n  const renderValue = renderValueProp || makeDefaultRender(children);\n\n  const labelIsFloating = hasFocus || open || renderValue(value) !== undefined;\n\n  const Comp: ComponentType<any> = native\n    ? (SelectComp as any)\n    : (SelectButton as any);\n\n  useEffect(() => {\n    // right after mounting, if the default value in the select element\n    // is different than the value we have stored in state we need to\n    // update our state to reflect that.\n    if (native && buttonRef.current && buttonRef.current.value !== value) {\n      onChange && onChange({} as any, buttonRef.current.value);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <SelectProvider value={{ native, onSelect: handleOnChange, value }}>\n      <Box display=\"inline-flex\" flexDirection=\"column\" width=\"100%\">\n        <Container\n          theme={theme}\n          label={label}\n          color={color}\n          labelIsFloating={labelIsFloating}\n          inputId={inputId}\n          hasFocus={hasFocus}\n          disabled={disabled}\n          forceActive={open}\n          error={hasError}\n          leadingIcon={Boolean(leadingIcon)}\n        >\n          <Menu onChange={handleToggle} open={open}>\n            {leadingIcon && (\n              <IconContainer position=\"start\">{leadingIcon}</IconContainer>\n            )}\n            <Comp\n              ref={assignMultipleRefs(forwardedRef, buttonRef)}\n              variant={variant}\n              id={inputId}\n              onFocus={wrapEvent(onFocus, handleFocus)}\n              onBlur={wrapEvent(onBlur, handleBlur)}\n              onChange={native ? handleOnChange : undefined}\n              value={native ? value : undefined}\n              theme={theme}\n              placeholder={placeholder}\n              disabled={disabled}\n              aria-disabled={disabled ? 'true' : undefined}\n              aria-describedby={helperTextId}\n              hasLabel={!!label}\n              leadingIcon={Boolean(leadingIcon)}\n              trailingIcon={true}\n              {...otherProps}\n            >\n              {native ? children : renderValue(value)}\n            </Comp>\n            {!native && (\n              <MenuPopover usePortal>\n                <MenuList\n                  defaultActiveItemValue={value}\n                  style={{\n                    minWidth: buttonRef?.current?.offsetWidth,\n                  }}\n                  role=\"listbox\"\n                >\n                  {children}\n                </MenuList>\n              </MenuPopover>\n            )}\n          </Menu>\n          <SelectIcon open={open} />\n        </Container>\n\n        <HelperText\n          disabled={disabled}\n          id={helperTextId}\n          leftSide={helperText}\n          error={hasError}\n        />\n      </Box>\n    </SelectProvider>\n  );\n});\n"],"mappings":"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"}