@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/cjs/tooltip/tooltip.styles.js

@@ -0,0 +1,159 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledTooltipTrigger = exports.StyledTooltipContent = exports.StyledTooltipArrow = exports.StyledTooltip = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledTooltipTrigger = (0, _stitches.styled)('div', {
+  width: 'max-content',
+  display: 'inherit'
+});
+exports.StyledTooltipTrigger = StyledTooltipTrigger;
+const StyledTooltipArrow = (0, _stitches.styled)('span', {
+  display: 'none',
+  content: '',
+  size: '$5',
+  zIndex: '-2',
+  background: '$$tooltipColor',
+  br: '0px 0px 2px 0px',
+  position: 'absolute'
+});
+exports.StyledTooltipArrow = StyledTooltipArrow;
+const StyledTooltip = (0, _stitches.styled)('div', {
+  position: 'relative',
+  fs: '$xs',
+  padding: 0,
+  variants: {
+    hideArrow: {
+      false: {
+        [`& ${StyledTooltipArrow}`]: {
+          display: 'block'
+        }
+      }
+    }
+  }
+});
+exports.StyledTooltip = StyledTooltip;
+const StyledTooltipContent = (0, _stitches.styled)('div', {
+  position: 'absolute',
+  width: 'auto',
+  padding: '$3 $sm',
+  opacity: 0,
+  zIndex: '$10',
+  br: '$lg',
+  '@motion': {
+    transition: 'none'
+  },
+  variants: {
+    color: {
+      default: {
+        $$tooltipColor: '$colors$background',
+        bg: '$$tooltipColor'
+      },
+      primary: {
+        $$tooltipColor: '$colors$primary',
+        bg: '$$tooltipColor'
+      },
+      secondary: {
+        $$tooltipColor: '$colors$secondary',
+        bg: '$$tooltipColor'
+      },
+      success: {
+        $$tooltipColor: '$colors$success',
+        bg: '$$tooltipColor'
+      },
+      warning: {
+        $$tooltipColor: '$colors$warning',
+        bg: '$$tooltipColor'
+      },
+      error: {
+        $$tooltipColor: '$colors$error',
+        bg: '$$tooltipColor'
+      },
+      invert: {
+        $$tooltipColor: '$colors$foreground',
+        $$tooltipTextColor: '$colors$background',
+        bg: '$$tooltipColor'
+      }
+    },
+    contentColor: {
+      default: {
+        $$tooltipTextColor: '$colors$text',
+        color: '$$tooltipTextColor'
+      },
+      primary: {
+        $$tooltipTextColor: '$colors$primary',
+        color: '$$tooltipTextColor'
+      },
+      secondary: {
+        $$tooltipTextColor: '$colors$secondary',
+        color: '$$tooltipTextColor'
+      },
+      success: {
+        $$tooltipTextColor: '$colors$success',
+        color: '$$tooltipTextColor'
+      },
+      warning: {
+        $$tooltipTextColor: '$colors$warning',
+        color: '$$tooltipTextColor'
+      },
+      error: {
+        $$tooltipTextColor: '$colors$error',
+        color: '$$tooltipTextColor'
+      }
+    },
+    rounded: {
+      true: {
+        br: '$pill'
+      }
+    },
+    shadow: {
+      true: {
+        bs: '$md'
+      }
+    },
+    animated: {
+      true: {
+        transition: 'opacity 0.25s ease 0s, top 0.25s ease 0s'
+      },
+      false: {
+        transition: 'none'
+      }
+    }
+  },
+  compoundVariants: [// color='primary' && contentColor='default'
+  {
+    color: 'primary',
+    contentColor: 'default',
+    css: {
+      $$tooltipTextColor: '$colors$white'
+    }
+  }, // color='secondary' && contentColor='default'
+  {
+    color: 'secondary',
+    contentColor: 'default',
+    css: {
+      $$tooltipTextColor: '$colors$white'
+    }
+  }, // color='success' && contentColor='default'
+  {
+    color: 'success',
+    contentColor: 'default',
+    css: {
+      $$tooltipTextColor: '$colors$white'
+    }
+  }, // color='error' && contentColor='default'
+  {
+    color: 'error',
+    contentColor: 'default',
+    css: {
+      $$tooltipTextColor: '$colors$white'
+    }
+  }],
+  defaultVariants: {
+    color: 'default',
+    contentColor: 'default'
+  }
+});
+exports.StyledTooltipContent = StyledTooltipContent;

package/cjs/use-body-scroll/index.d.ts

@@ -0,0 +1,3 @@
+import useBodyScroll from './use-body-scroll';
+export type { BodyScrollOptions } from './use-body-scroll';
+export default useBodyScroll;

package/cjs/use-body-scroll/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useBodyScroll = _interopRequireDefault(require("./use-body-scroll"));
+
+var _default = _useBodyScroll.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-body-scroll/use-body-scroll.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+export declare type ElementStackItem = {
+    last: string;
+};
+export declare type BodyScrollOptions = {
+    scrollLayer: boolean;
+};
+declare const useBodyScroll: (elementRef?: RefObject<HTMLElement> | null | undefined, options?: BodyScrollOptions | undefined) => [boolean, Dispatch<SetStateAction<boolean>>];
+export default useBodyScroll;

package/cjs/use-body-scroll/use-body-scroll.js

@@ -0,0 +1,77 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+const defaultOptions = {
+  scrollLayer: false
+};
+const elementStack = new Map();
+
+const isIos = () => {
+  /* istanbul ignore next */
+  if (typeof window === 'undefined' || !window.navigator) return false;
+  return /iP(ad|hone|od)/.test(window.navigator.platform);
+};
+
+const touchHandler = event => {
+  if (event.touches && event.touches.length > 1) return true;
+  event.preventDefault();
+  return false;
+};
+
+const useBodyScroll = (elementRef, options) => {
+  /* istanbul ignore next */
+  if (typeof document === 'undefined') return [false, t => t];
+  const elRef = elementRef || (0, _react.useRef)(document.body);
+  const [hidden, setHidden] = (0, _react.useState)(false);
+  const safeOptions = { ...defaultOptions,
+    ...(options || {})
+  }; // don't prevent touch event when layer contain scroll
+
+  const isIosWithCustom = () => {
+    if (safeOptions.scrollLayer) return false;
+    return isIos();
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!elRef || !elRef.current) return;
+    const lastOverflow = elRef.current.style.overflow;
+
+    if (hidden) {
+      if (elementStack.has(elRef.current)) return;
+
+      if (!isIosWithCustom()) {
+        elRef.current.style.overflow = 'hidden';
+      } else {
+        document.addEventListener('touchmove', touchHandler, {
+          passive: false
+        });
+      }
+
+      elementStack.set(elRef.current, {
+        last: lastOverflow
+      });
+      return;
+    } // reset element overflow
+
+
+    if (!elementStack.has(elRef.current)) return;
+
+    if (!isIosWithCustom()) {
+      const store = elementStack.get(elRef.current);
+      elRef.current.style.overflow = store.last;
+    } else {
+      document.removeEventListener('touchmove', touchHandler);
+    }
+
+    elementStack.delete(elRef.current);
+  }, [hidden, elRef]);
+  return [hidden, setHidden];
+};
+
+var _default = useBodyScroll;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-click-anywhere/index.d.ts

@@ -0,0 +1,2 @@
+import useClickAnyWhere from './use-click-anywhere';
+export default useClickAnyWhere;

package/cjs/use-click-anywhere/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useClickAnywhere = _interopRequireDefault(require("./use-click-anywhere"));
+
+var _default = _useClickAnywhere.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-click-anywhere/use-click-anywhere.d.ts

@@ -0,0 +1,2 @@
+declare const useClickAnyWhere: (handler: (event: Event) => void) => void;
+export default useClickAnyWhere;

package/cjs/use-click-anywhere/use-click-anywhere.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+const useClickAnyWhere = handler => {
+  (0, _react.useEffect)(() => {
+    const callback = event => handler(event);
+
+    document.addEventListener('click', callback);
+    return () => document.removeEventListener('click', callback);
+  }, [handler]);
+};
+
+var _default = useClickAnyWhere;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-click-away/index.d.ts

@@ -0,0 +1,2 @@
+import useClickAway from './use-click-away';
+export default useClickAway;

package/cjs/use-click-away/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useClickAway = _interopRequireDefault(require("./use-click-away"));
+
+var _default = _useClickAway.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-click-away/use-click-away.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject } from 'react';
+declare const useClickAway: (ref: MutableRefObject<HTMLElement | null>, handler: (event: Event) => void) => void;
+export default useClickAway;

package/cjs/use-click-away/use-click-away.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+const useClickAway = (ref, handler) => {
+  (0, _react.useEffect)(() => {
+    const callback = event => {
+      const el = ref.current;
+      if (!event || !el || el.contains(event.target)) return;
+      handler(event);
+    };
+
+    document.addEventListener('click', callback);
+    return () => document.removeEventListener('click', callback);
+  }, [ref, handler]);
+};
+
+var _default = useClickAway;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-clipboard/index.d.ts

@@ -0,0 +1,3 @@
+import useClipboard from './use-clipboard';
+export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard';
+export default useClipboard;

package/cjs/use-clipboard/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useClipboard = _interopRequireDefault(require("./use-clipboard"));
+
+var _default = _useClipboard.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-clipboard/use-clipboard.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+var _usePortal = _interopRequireDefault(require("../use-portal"));
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _assertion = require("../utils/assertion");
+
+const defaultOptions = {
+  onError: () => _assertion.__DEV__ && (0, _useWarning.default)('Failed to copy.', 'use-clipboard')
+};
+
+const useClipboard = (options = defaultOptions) => {
+  const el = (0, _usePortal.default)('clipboard');
+
+  const copyText = (el, text) => {
+    if (!el || !text) return;
+    const selection = window.getSelection();
+    if (!selection) return;
+    el.style.whiteSpace = 'pre';
+    el.textContent = text;
+    const range = window.document.createRange();
+    selection.removeAllRanges();
+    range.selectNode(el);
+    selection.addRange(range);
+
+    try {
+      window.document.execCommand('copy');
+    } catch (e) {
+      options.onError && options.onError();
+    }
+
+    selection.removeAllRanges();
+
+    if (el) {
+      el.textContent = '';
+    }
+  };
+
+  const copy = (0, _react.useCallback)(text => {
+    copyText(el, text);
+  }, [el]);
+  return {
+    copy
+  };
+};
+
+var _default = useClipboard;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-current-state/index.d.ts

@@ -0,0 +1,2 @@
+import useCurrentState from './use-current-state';
+export default useCurrentState;

package/cjs/use-current-state/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useCurrentState = _interopRequireDefault(require("./use-current-state"));
+
+var _default = _useCurrentState.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-current-state/use-current-state.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+const useCurrentState = initialState => {
+  const [state, setState] = (0, _react.useState)(() => {
+    return typeof initialState === 'function' ? initialState() : initialState;
+  });
+  const ref = (0, _react.useRef)(initialState);
+  (0, _react.useEffect)(() => {
+    ref.current = state;
+  }, [state]);
+
+  const setValue = val => {
+    const result = typeof val === 'function' ? val(ref.current) : val;
+    ref.current = result;
+    setState(result);
+  };
+
+  return [state, setValue, ref];
+};
+
+var _default = useCurrentState;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-drip/index.d.ts

@@ -0,0 +1,2 @@
+import useDrip from './use-drip';
+export default useDrip;

package/cjs/use-drip/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useDrip = _interopRequireDefault(require("./use-drip"));
+
+var _default = _useDrip.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-drip/use-drip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const useDrip: (initialValue: boolean | undefined, ref: React.RefObject<HTMLElement>) => {
+    visible: boolean;
+    x: number;
+    y: number;
+    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    onCompleted: () => void;
+};
+export default useDrip;

package/cjs/use-drip/use-drip.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = require("react");
+
+const useDrip = (initialValue = false, ref) => {
+  const [dripVisible, setDripVisible] = (0, _react.useState)(initialValue);
+  const [dripX, setDripX] = (0, _react.useState)(0);
+  const [dripY, setDripY] = (0, _react.useState)(0);
+
+  const dripCompletedHandle = () => {
+    setDripVisible(false);
+    setDripX(0);
+    setDripY(0);
+  };
+
+  const clickHandler = event => {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    setDripVisible(true);
+    setDripX(event.clientX - rect.left);
+    setDripY(event.clientY - rect.top);
+  };
+
+  return {
+    visible: dripVisible,
+    x: dripX,
+    y: dripY,
+    onClick: clickHandler,
+    onCompleted: dripCompletedHandle
+  };
+};
+
+var _default = useDrip;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-input/index.d.ts

@@ -0,0 +1,2 @@
+import useInput from './use-input';
+export default useInput;

package/cjs/use-input/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useInput = _interopRequireDefault(require("./use-input"));
+
+var _default = _useInput.default;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/use-input/use-input.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, MutableRefObject, SetStateAction } from 'react';
+export declare type BindingsChangeTarget = React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | string;
+declare const useInput: (initialValue: string) => {
+    value: string;
+    setValue: Dispatch<SetStateAction<string>>;
+    currentRef: MutableRefObject<string>;
+    reset: () => void;
+    bindings: {
+        value: string;
+        onChange: (event: BindingsChangeTarget) => void;
+    };
+};
+export default useInput;

package/cjs/use-input/use-input.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+const useInput = initialValue => {
+  const [value, setValue, currentRef] = (0, _useCurrentState.default)(initialValue);
+  return {
+    value,
+    setValue,
+    currentRef,
+    reset: () => setValue(initialValue),
+    bindings: {
+      value,
+      onChange: event => {
+        if (typeof event === 'object' && event.target) {
+          setValue(event.target.value);
+        } else {
+          setValue(event);
+        }
+      }
+    }
+  };
+};
+
+var _default = useInput;
+exports.default = _default;
+module.exports = exports.default;