@basic-ui/core 0.0.52 → 0.0.53

package/README.md

@@ -1,3 +1,3 @@
-# Base Components
-
-All the components in this module should be FREE of any styling. They should only implement the core functionality of patterns. Styling should be responsibility of other components using this.
+# Base Components
+
+All the components in this module should be FREE of any styling. They should only implement the core functionality of patterns. Styling should be responsibility of other components using this.

package/build/cjs/index.js

@@ -122,20 +122,20 @@ function getCircularIndex(index, maxLength) {
   return (index % maxLength + maxLength) % maxLength;
 }
 
-/**
- * Detects right clicks
- *
- * @param nativeEvent
+/**
+ * Detects right clicks
+ *
+ * @param nativeEvent
  */
 function isRightClick(nativeEvent) {
   return 'which' in nativeEvent ? nativeEvent.which === 3 : 'button' in nativeEvent ? nativeEvent.button === 2 : false;
 }
 
-/**
- * Get an element's owner document. Useful when components are used in iframes
- * or other environments like dev tools.
- *
- * @param element
+/**
+ * Get an element's owner document. Useful when components are used in iframes
+ * or other environments like dev tools.
+ *
+ * @param element
  */
 
 function getOwnerDocument(element) {
@@ -161,10 +161,10 @@ function rubberBandClamp(min, max, delta, constant = 0.15) {
 
 /* eslint-disable react-hooks/rules-of-hooks */
 const useEnhancedEffect$2 = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when
- * passed as a dependency.
+/**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when
+ * passed as a dependency.
  */
 
 function createStableCallbackHook(useEffectHook, callback) {
@@ -177,24 +177,24 @@ function createStableCallbackHook(useEffectHook, callback) {
     callbackRef.current && callbackRef.current(...args);
   }, []);
 }
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when passed
- * as a dependency.
+/**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when passed
+ * as a dependency.
  */
 
 
 function useStableCallback(callback) {
   return createStableCallbackHook(react.useEffect, callback);
 }
-/**
- * Converts a callback to a ref to avoid triggering re-renders when passed as a
- * prop and exposed as a stable function to avoid executing effects when passed
- * as a dependency.
- *
- * Use this over `useStableCallback` when you want the callback to be cached in
- * `useLayoutEffect` instead of `useEffect` to deal with timing issues only when
- * needed.
+/**
+ * Converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop and exposed as a stable function to avoid executing effects when passed
+ * as a dependency.
+ *
+ * Use this over `useStableCallback` when you want the callback to be cached in
+ * `useLayoutEffect` instead of `useEffect` to deal with timing issues only when
+ * needed.
  */
 
 function useStableLayoutCallback(callback) {
@@ -2342,15 +2342,30 @@ const context = /*#__PURE__*/react.createContext(null);
 const PopperProvider = context.Provider;
 const usePopperContext = () => react.useContext(context);
 
+const PortalSelectorContext = /*#__PURE__*/react.createContext(null);
+PortalSelectorContext.displayName = 'PortalSelectorContext';
+const PortalSelectorProvider = ({
+  selector,
+  children
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsx(PortalSelectorContext.Provider, {
+    value: selector,
+    children: children
+  });
+};
+
 const Portal = ({
   children,
-  selector = 'body'
+  selector: selectorProp
 }) => {
+  const selectorCtx = react.useContext(PortalSelectorContext);
+
   if (typeof window === 'undefined') {
     return null;
   }
 
-  const dom = document.querySelector(selector);
+  const selector = selectorProp || selectorCtx || 'body';
+  const dom = typeof selector === 'string' ? document.querySelector(selector) : selector();
 
   if (dom) {
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -2643,10 +2658,10 @@ const noop = () => {
 
 const [SliderProvider, useSliderContext] = createContext('Slider'); ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * Slider
- *
- * @see Docs https://reach.tech/slider#slider
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
  */
 
 const Slider = /*#__PURE__*/react.forwardRef(function Slider({
@@ -2661,20 +2676,20 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider({
     })
   });
 });
-/**
- * @see Docs https://reach.tech/slider#slider-props
+/**
+ * @see Docs https://reach.tech/slider#slider-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderInput
- *
- * The parent component of the slider interface. This is a lower level component
- * if you need more control over styles or rendering the slider's inner
- * components.
- *
- * @see Docs https://reach.tech/slider#sliderinput
+/**
+ * SliderInput
+ *
+ * The parent component of the slider interface. This is a lower level component
+ * if you need more control over styles or rendering the slider's inner
+ * components.
+ *
+ * @see Docs https://reach.tech/slider#sliderinput
  */
 const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
   'aria-label': ariaLabel,
@@ -3033,16 +3048,16 @@ const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
     })
   });
 });
-/**
- * @see Docs https://reach.tech/slider#sliderinput-props
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderTrack
- *
- * @see Docs https://reach.tech/slider#slidertrack
+/**
+ * SliderTrack
+ *
+ * @see Docs https://reach.tech/slider#slidertrack
  */
 const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
   as: Comp = 'div',
@@ -3071,19 +3086,19 @@ const SliderTrackImpl = /*#__PURE__*/react.forwardRef(function SliderTrack({
   });
 });
 const SliderTrack = /*#__PURE__*/react.memo(SliderTrackImpl);
-/**
- * @see Docs https://reach.tech/slider#slidertrack-props
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderRange
- *
- * The (typically) highlighted portion of the track that represents the space
- * between the slider's `min` value and its current value.
- *
- * @see Docs https://reach.tech/slider#sliderrange
+/**
+ * SliderRange
+ *
+ * The (typically) highlighted portion of the track that represents the space
+ * between the slider's `min` value and its current value.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange
  */
 const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
   as: Comp = 'div',
@@ -3113,22 +3128,22 @@ const SliderRangeImpl = /*#__PURE__*/react.forwardRef(function SliderRange({
   });
 });
 const SliderRange = /*#__PURE__*/react.memo(SliderRangeImpl);
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- * `SliderRange` will not accept or render any children.
- *
- * @see Docs https://reach.tech/slider#sliderrange-props
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ * `SliderRange` will not accept or render any children.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange-props
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderHandle
- *
- * The handle that the user drags along the track to set the slider value.
- *
- * @see Docs https://reach.tech/slider#sliderhandle
+/**
+ * SliderHandle
+ *
+ * The handle that the user drags along the track to set the slider value.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle
  */
 const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
   // min,
@@ -3216,22 +3231,22 @@ const SliderHandleImpl = /*#__PURE__*/react.forwardRef(function SliderHandle({
   });
 });
 const SliderHandle = /*#__PURE__*/react.memo(SliderHandleImpl);
-/**
- * `SliderRange` accepts any props that a HTML div component accepts.
- *
- * @see Docs https://reach.tech/slider#sliderhandle-props
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
 ////////////////////////////////////////////////////////////////////////////////
 
-/**
- * SliderMarker
- *
- * A fixed value marker. These can be used to illustrate a range of steps or
- * highlight important points along the slider track.
- *
- * @see Docs https://reach.tech/slider#slidermarker
+/**
+ * SliderMarker
+ *
+ * A fixed value marker. These can be used to illustrate a range of steps or
+ * highlight important points along the slider track.
+ *
+ * @see Docs https://reach.tech/slider#slidermarker
  */
 const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   as: Comp = 'div',
@@ -3275,21 +3290,21 @@ const SliderMarkerImpl = /*#__PURE__*/react.forwardRef(function SliderMarker({
   }) : null;
 });
 const SliderMarker = /*#__PURE__*/react.memo(SliderMarkerImpl);
-/**
- * @see Docs https://reach.tech/slider#slidermarker-props
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
  */
 
 ////////////////////////////////////////////////////////////////////////////////
 function clamp$1(val, min, max) {
   return val > max ? max : val < min ? min : val;
 }
-/**
- * This handles the case when num is very small (0.00000001), js will turn
- * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
- * converted to this notation so it's fine.
- *
- * @param num
- * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
+/**
+ * This handles the case when num is very small (0.00000001), js will turn
+ * this into 1e-8. When num is bigger than 1 or less than -1 it won't get
+ * converted to this notation so it's fine.
+ *
+ * @param num
+ * @see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js#L69
  */
 
 
@@ -3373,8 +3388,8 @@ function useDimensions(ref) {
   // check for any conflicts with box sizing first and only use
   // `getComputedStyle` if neccessary.
 
-  /* const { width, height } = ref.current
-    ? ref.current.getBoundingClientRect()
+  /* const { width, height } = ref.current
+    ? ref.current.getBoundingClientRect()
     : 0; */
 
   react.useLayoutEffect(() => {
@@ -4097,6 +4112,7 @@ exports.Popper = Popper;
 exports.PopperArrow = PopperArrow;
 exports.PopperProvider = PopperProvider;
 exports.Portal = Portal;
+exports.PortalSelectorProvider = PortalSelectorProvider;
 exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
 exports.Slider = Slider;