@chakra-ui/utils - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

CHANGELOG.md

 # Change Log
 
+## 1.4.0
+
+### Minor Changes
+
+- [`e748219f3`](https://github.com/chakra-ui/chakra-ui/commit/e748219f300f0c51b0eb304fce38b014d7bcbc86)
+  Thanks [@segunadebayo](https://github.com/segunadebayo)! - ### Pointer Events
+
+  Add unified pointer event management utils and hook for interal use only.
+
+  The hook is called `usePointerEvent`, it works pretty similar to
+  `useEventListener` except that does two things:
+
+  - Unifies the pointer event system and ensure that only one of `onMouse*`,
+    `onTouch*`, or `onPointer*` handler runs
+  - Provide event information about the pointer event like `x` and `y` position
+    depending on the pointer type.
+
+  > Credits to `framer-motion` for doing the hard work for this utilities
+
+  - Added `useFocusOnPointerDown` to get Safari to detect the correct
+    `event.relatedTarget` when you blur a focused element.
+
+  ### Focus Management
+
+  Set `preventScroll` option to be `true` by default, setting focus on an
+  element should happen without scrolling the page (in most cases).
+
+  Set `nextTick` to `undefined` by default and update all components that use
+  next tick to use `{ nextTick: true }`.
+
+* [`91ef14839`](https://github.com/chakra-ui/chakra-ui/commit/91ef148397187010804eb8f30307d2ec94c32c5b)
+  [#3583](https://github.com/chakra-ui/chakra-ui/pull/3583) Thanks
+  [@segunadebayo](https://github.com/segunadebayo)! - Add `getCSSVar` function
+  to resolve token values and return the css variable reference instead of the
+  actual value. It does a lookup against `theme.__cssMap`.
+
+  ```jsx
+  const value = getCSSVar(theme, "colors", "blue.500")
+  // => "var(--chakra-colors-blue.500)"
+
+  const value = getCSSVar(theme, "colors", "tomato")
+  // => "tomato" // since tomato doesn't exist in theme colors
+  ```
+
 ## 1.3.0
@@ -4,0 +48,0 @@

dist/cjs/assertion.js

@@ -12,3 +12,3 @@ "use strict";
 exports.isInputEvent = isInputEvent;
-exports.__DEV__ = exports.isEmpty = exports.isNull = exports.isEmptyObject = exports.isObject = exports.isUndefined = exports.isDefined = exports.isEmptyArray = exports.isNotNumber = void 0;
+exports.isRefObject = exports.__DEV__ = exports.isEmpty = exports.isNull = exports.isEmptyObject = exports.isObject = exports.isUndefined = exports.isDefined = exports.isEmptyArray = exports.isNotNumber = void 0;
 
@@ -111,2 +111,8 @@ // Number assertions
 exports.__DEV__ = __DEV__;
+
+var isRefObject = function isRefObject(val) {
+  return "current" in val;
+};
+
+exports.isRefObject = isRefObject;
 //# sourceMappingURL=assertion.js.map

dist/cjs/dom.js

@@ -6,2 +6,3 @@ "use strict";
 exports.getOwnerDocument = getOwnerDocument;
+exports.getRelatedTarget = getRelatedTarget;
 exports.canUseDOM = canUseDOM;
@@ -11,8 +12,9 @@ exports.normalizeEventKey = normalizeEventKey;
 exports.contains = contains;
+exports.addDomEvent = addDomEvent;
 exports.cx = exports.ariaAttr = exports.dataAttr = exports.isBrowser = void 0;
 
 function getOwnerWindow(node) {
-  var _getOwnerDocument$def;
+  var _getOwnerDocument$def, _getOwnerDocument;
 
-  return node instanceof Element ? (_getOwnerDocument$def = getOwnerDocument(node).defaultView) != null ? _getOwnerDocument$def : window : window;
+  return node instanceof Element ? (_getOwnerDocument$def = (_getOwnerDocument = getOwnerDocument(node)) == null ? void 0 : _getOwnerDocument.defaultView) != null ? _getOwnerDocument$def : window : window;
 }
@@ -26,2 +28,6 @@
 
+function getRelatedTarget(event) {
+  return event.relatedTarget || event.nativeEvent.explicitOriginalTarget || document.activeElement;
+}
+
 function canUseDOM() {
@@ -75,4 +81,12 @@ return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 function contains(parent, child) {
+  if (!parent) return false;
   return parent === child || parent.contains(child);
 }
+
+function addDomEvent(target, eventName, handler, options) {
+  target.addEventListener(eventName, handler, options);
+  return function () {
+    target.removeEventListener(eventName, handler, options);
+  };
+}
 //# sourceMappingURL=dom.js.map

dist/cjs/focus.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _function = require("./function");
+
 var _tabbable = require("./tabbable");
@@ -17,11 +19,2 @@
 
-function isInputElement(element) {
-  return (0, _tabbable.isHTMLElement)(element) && element.tagName.toLowerCase() === "input" && "select" in element;
-}
-
-function getActiveElement(element) {
-  var doc = element instanceof HTMLElement ? (0, _dom.getOwnerDocument)(element) : document;
-  return doc.activeElement === element;
-}
-
 function focus(element, options) {
@@ -34,9 +27,16 @@ if (options === void 0) {
       _options$isActive = _options.isActive,
-      isActive = _options$isActive === void 0 ? getActiveElement : _options$isActive,
-      _options$nextTick = _options.nextTick,
-      nextTick = _options$nextTick === void 0 ? true : _options$nextTick,
-      preventScroll = _options.preventScroll;
-  if (isActive(element)) return -1;
+      isActive = _options$isActive === void 0 ? _tabbable.isActiveElement : _options$isActive,
+      nextTick = _options.nextTick,
+      _options$preventScrol = _options.preventScroll,
+      preventScroll = _options$preventScrol === void 0 ? true : _options$preventScrol,
+      _options$selectTextIf = _options.selectTextIfInput,
+      selectTextIfInput = _options$selectTextIf === void 0 ? true : _options$selectTextIf;
+  if (!element || isActive(element)) return -1;
 
   function triggerFocus() {
+    if (!element) {
+      (0, _function.warn)("[chakra-ui]: can't call focus() on `null` or `undefined` element");
+      return;
+    }
+
     if (supportsPreventScroll()) {
@@ -55,3 +55,3 @@ element.focus({
 
-    if (isInputElement(element)) {
+    if ((0, _tabbable.isInputElement)(element) && selectTextIfInput) {
       element.select();
@@ -58,0 +58,0 @@ }

dist/cjs/index.js

@@ -108,2 +108,18 @@ "use strict";
 });
+
+var _pointerEvent = require("./pointer-event");
+
+Object.keys(_pointerEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _pointerEvent[key]) return;
+  exports[key] = _pointerEvent[key];
+});
+
+var _userAgent = require("./user-agent");
+
+Object.keys(_userAgent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _userAgent[key]) return;
+  exports[key] = _userAgent[key];
+});
 //# sourceMappingURL=index.js.map

dist/cjs/object.js

@@ -10,3 +10,3 @@ "use strict";
 exports.objectFilter = objectFilter;
-exports.fromEntries = exports.objectKeys = exports.filterUndefined = exports.memoizedGet = exports.memoize = exports.mergeWith = void 0;
+exports.getCSSVar = exports.fromEntries = exports.objectKeys = exports.filterUndefined = exports.memoizedGet = exports.memoize = exports.mergeWith = void 0;
 
@@ -157,4 +157,16 @@ var _lodash = _interopRequireDefault(require("lodash.mergewith"));
 };
+/**
+ * Get the CSS variable ref stored in the theme
+ */
 
+
 exports.fromEntries = fromEntries;
+
+var getCSSVar = function getCSSVar(theme, scale, value) {
+  var _theme$__cssMap$$varR, _theme$__cssMap$;
+
+  return (_theme$__cssMap$$varR = (_theme$__cssMap$ = theme.__cssMap[scale + "." + value]) == null ? void 0 : _theme$__cssMap$.varRef) != null ? _theme$__cssMap$$varR : value;
+};
+
+exports.getCSSVar = getCSSVar;
 //# sourceMappingURL=object.js.map

dist/cjs/tabbable.js

@@ -5,2 +5,4 @@ "use strict";
 exports.isDisabled = isDisabled;
+exports.isInputElement = isInputElement;
+exports.isActiveElement = isActiveElement;
 exports.hasFocusWithin = hasFocusWithin;
@@ -14,2 +16,4 @@ exports.isHTMLElement = isHTMLElement;
 
+var _dom = require("./dom");
+
 // Really great work done by Diego Haz on this one
@@ -39,2 +43,11 @@ // https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/tabbable.ts
 
+function isInputElement(element) {
+  return isHTMLElement(element) && element.tagName.toLowerCase() === "input" && "select" in element;
+}
+
+function isActiveElement(element) {
+  var doc = element instanceof HTMLElement ? (0, _dom.getOwnerDocument)(element) : document;
+  return doc.activeElement === element;
+}
+
 function hasFocusWithin(element) {
@@ -41,0 +54,0 @@ if (!document.activeElement) return false;

dist/esm/assertion.js

@@ -51,2 +51,3 @@ // Number assertions
 export var __DEV__ = process.env.NODE_ENV !== "production";
+export var isRefObject = val => "current" in val;
 //# sourceMappingURL=assertion.js.map

dist/esm/dom.js

 export function getOwnerWindow(node) {
-  var _getOwnerDocument$def;
+  var _getOwnerDocument$def, _getOwnerDocument;
 
-  return node instanceof Element ? (_getOwnerDocument$def = getOwnerDocument(node).defaultView) != null ? _getOwnerDocument$def : window : window;
+  return node instanceof Element ? (_getOwnerDocument$def = (_getOwnerDocument = getOwnerDocument(node)) == null ? void 0 : _getOwnerDocument.defaultView) != null ? _getOwnerDocument$def : window : window;
 }
@@ -11,2 +11,5 @@ export function getOwnerDocument(node) {
 }
+export function getRelatedTarget(event) {
+  return event.relatedTarget || event.nativeEvent.explicitOriginalTarget || document.activeElement;
+}
 export function canUseDOM() {
@@ -44,4 +47,11 @@ return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 export function contains(parent, child) {
+  if (!parent) return false;
   return parent === child || parent.contains(child);
 }
+export function addDomEvent(target, eventName, handler, options) {
+  target.addEventListener(eventName, handler, options);
+  return () => {
+    target.removeEventListener(eventName, handler, options);
+  };
+}
 //# sourceMappingURL=dom.js.map

dist/esm/focus.js

@@ -6,13 +6,4 @@ // Original licensing for the following methods can be found in the
 import { getOwnerDocument } from "./dom";
-import { isHTMLElement } from "./tabbable";
-
-function isInputElement(element) {
-  return isHTMLElement(element) && element.tagName.toLowerCase() === "input" && "select" in element;
-}
-
-function getActiveElement(element) {
-  var doc = element instanceof HTMLElement ? getOwnerDocument(element) : document;
-  return doc.activeElement === element;
-}
-
+import { warn } from "./function";
+import { isActiveElement, isInputElement } from "./tabbable";
 export function focus(element, options) {
@@ -24,9 +15,15 @@ if (options === void 0) {
   var {
-    isActive = getActiveElement,
-    nextTick = true,
-    preventScroll
+    isActive = isActiveElement,
+    nextTick,
+    preventScroll = true,
+    selectTextIfInput = true
   } = options;
-  if (isActive(element)) return -1;
+  if (!element || isActive(element)) return -1;
 
   function triggerFocus() {
+    if (!element) {
+      warn("[chakra-ui]: can't call focus() on `null` or `undefined` element");
+      return;
+    }
+
     if (supportsPreventScroll()) {
@@ -45,3 +42,3 @@ element.focus({
 
-    if (isInputElement(element)) {
+    if (isInputElement(element) && selectTextIfInput) {
       element.select();
@@ -48,0 +45,0 @@ }

dist/esm/index.js

@@ -14,2 +14,4 @@ export * from "./function";
 export * from "./focus";
+export * from "./pointer-event";
+export * from "./user-agent";
 //# sourceMappingURL=index.js.map

dist/esm/object.js

@@ -116,2 +116,11 @@ export { default as mergeWith } from "lodash.mergewith";
 }, {});
+/**
+ * Get the CSS variable ref stored in the theme
+ */
+
+export var getCSSVar = (theme, scale, value) => {
+  var _theme$__cssMap$$varR, _theme$__cssMap$;
+
+  return (_theme$__cssMap$$varR = (_theme$__cssMap$ = theme.__cssMap[scale + "." + value]) == null ? void 0 : _theme$__cssMap$.varRef) != null ? _theme$__cssMap$$varR : value;
+};
 //# sourceMappingURL=object.js.map

dist/esm/tabbable.js

 // Really great work done by Diego Haz on this one
 // https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/tabbable.ts
+import { getOwnerDocument } from "./dom";
 export var hasDisplayNone = element => window.getComputedStyle(element).display === "none";
@@ -9,2 +10,9 @@ export var hasTabIndex = element => element.hasAttribute("tabindex");
 }
+export function isInputElement(element) {
+  return isHTMLElement(element) && element.tagName.toLowerCase() === "input" && "select" in element;
+}
+export function isActiveElement(element) {
+  var doc = element instanceof HTMLElement ? getOwnerDocument(element) : document;
+  return doc.activeElement === element;
+}
 export function hasFocusWithin(element) {
@@ -11,0 +19,0 @@ if (!document.activeElement) return false;

dist/types/assertion.d.ts

@@ -19,1 +19,4 @@ import { ChangeEvent } from "react";
 export declare const __DEV__: boolean;
+export declare const isRefObject: (val: any) => val is {
+    current: any;
+};

dist/types/dom.d.ts

@@ -5,2 +5,3 @@ import * as React from "react";
 export declare function getOwnerDocument(node?: HTMLElement | null): Document;
+export declare function getRelatedTarget<E extends FocusEvent | React.FocusEvent>(event: E): HTMLElement;
 export declare function canUseDOM(): boolean;
@@ -17,2 +18,3 @@ export declare const isBrowser: boolean;
 export declare function getActiveElement(node?: HTMLElement): HTMLElement;
-export declare function contains(parent: HTMLElement, child: HTMLElement): boolean;
+export declare function contains(parent: HTMLElement | null, child: HTMLElement): boolean;
+export declare function addDomEvent(target: EventTarget, eventName: string, handler: EventListener, options?: AddEventListenerOptions): () => void;

dist/types/focus.d.ts

@@ -1,10 +0,7 @@
-export interface FocusableElement {
-    focus(options?: FocusOptions): void;
-}
-declare function getActiveElement(element: FocusableElement): boolean;
-interface FocusProps extends FocusOptions {
+import { FocusableElement, isActiveElement } from "./tabbable";
+export interface ExtendedFocusOptions extends FocusOptions {
     /**
      * Function that determines if the element is the active element
      */
-    isActive?: typeof getActiveElement;
+    isActive?: typeof isActiveElement;
     /**
@@ -14,4 +11,7 @@ * If true, the element will be focused in the next tick
     nextTick?: boolean;
+    /**
+     * If true and element is an input element, the input's text will be selected
+     */
+    selectTextIfInput?: boolean;
 }
-export declare function focus(element: FocusableElement, options?: FocusProps): number;
-export {};
+export declare function focus(element: FocusableElement | null, options?: ExtendedFocusOptions): number;

dist/types/index.d.ts

@@ -14,1 +14,3 @@ export * from "./function";
 export * from "./focus";
+export * from "./pointer-event";
+export * from "./user-agent";

dist/types/object.d.ts

@@ -39,1 +39,5 @@ import type { Dict } from "./types";
 export declare const fromEntries: <T extends unknown>(entries: [string, any][]) => T;
+/**
+ * Get the CSS variable ref stored in the theme
+ */
+export declare const getCSSVar: (theme: Dict, scale: string, value: any) => any;

dist/types/tabbable.d.ts

@@ -5,2 +5,7 @@ export declare const hasDisplayNone: (element: HTMLElement) => boolean;
 export declare function isDisabled(element: HTMLElement): boolean;
+export interface FocusableElement {
+    focus(options?: FocusOptions): void;
+}
+export declare function isInputElement(element: FocusableElement): element is HTMLInputElement;
+export declare function isActiveElement(element: FocusableElement): boolean;
 export declare function hasFocusWithin(element: HTMLElement): boolean;
@@ -7,0 +12,0 @@ export declare function isHTMLElement(element: any): element is HTMLElement;

package.json

 {
   "name": "@chakra-ui/utils",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Common utilties and types for Chakra UI",
@@ -5,0 +5,0 @@ "author": "Segun Adebayo <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

288473

increased by19.08%

Number of package files

78

increased by14.71%

Lines of code

2895

increased by18.99%

No dependency changes