UNPKG

5.58 kBJavaScriptView Raw
1"use strict";
2
3exports.__esModule = true;
4exports.getFocusables = getFocusables;
5exports.setRef = setRef;
6exports.useForkRef = useForkRef;
7exports.createChainedFunction = createChainedFunction;
8exports.useVariantColorWarning = useVariantColorWarning;
9exports.cleanChildren = cleanChildren;
10exports.inputProps = exports.isObject = exports.prefersReducedMotion = exports.isReducedMotion = exports.wrapEvent = exports.useEnhancedEffect = exports.assignRef = void 0;
11
12var _react = require("react");
13
14var _ThemeProvider = require("../ThemeProvider");
15
16var assignRef = function assignRef(ref, value) {
17 if (ref == null) return;
18
19 if (typeof ref === "function") {
20 ref(value);
21 } else {
22 try {
23 ref.current = value;
24 } catch (error) {
25 throw new Error("Cannot assign value \"" + value + "\" to ref \"" + ref + "\"");
26 }
27 }
28};
29
30exports.assignRef = assignRef;
31var focusableElList = ["a[href]", "area[href]", "button:not([disabled])", "embed", "iframe", "input:not([disabled])", "object", "select:not([disabled])", "textarea:not([disabled])", "*[tabindex]:not([aria-disabled])", "*[contenteditable]"];
32var focusableElSelector = focusableElList.join();
33
34function getFocusables(element, keyboardOnly) {
35 if (keyboardOnly === void 0) {
36 keyboardOnly = false;
37 }
38
39 var focusableEls = Array.from(element.querySelectorAll(focusableElSelector)); // filter out elements with display: none
40
41 focusableEls = focusableEls.filter(function (focusableEl) {
42 return window.getComputedStyle(focusableEl).display !== "none";
43 });
44
45 if (keyboardOnly === true) {
46 focusableEls = focusableEls.filter(function (focusableEl) {
47 return focusableEl.getAttribute("tabindex") !== "-1";
48 });
49 }
50
51 return focusableEls;
52}
53
54function setRef(ref, value) {
55 if (typeof ref === "function") {
56 ref(value);
57 } else if (ref) {
58 ref.current = value;
59 }
60}
61
62function useForkRef(refA, refB) {
63 return (0, _react.useMemo)(function () {
64 if (refA == null && refB == null) {
65 return null;
66 }
67
68 return function (refValue) {
69 setRef(refA, refValue);
70 setRef(refB, refValue);
71 };
72 }, [refA, refB]);
73}
74
75function createChainedFunction() {
76 for (var _len = arguments.length, funcs = new Array(_len), _key = 0; _key < _len; _key++) {
77 funcs[_key] = arguments[_key];
78 }
79
80 return funcs.reduce(function (acc, func) {
81 if (func == null) {
82 return acc;
83 }
84
85 return function chainedFunction() {
86 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
87 args[_key2] = arguments[_key2];
88 }
89
90 acc.apply(this, args);
91 func.apply(this, args);
92 };
93 }, function () {});
94}
95
96var useEnhancedEffect = typeof window !== "undefined" ? _react.useLayoutEffect : _react.useEffect;
97exports.useEnhancedEffect = useEnhancedEffect;
98
99var wrapEvent = function wrapEvent(theirHandler, ourHandler) {
100 return function (event) {
101 if (theirHandler) {
102 theirHandler(event);
103 }
104
105 if (!event.defaultPrevented) {
106 return ourHandler(event);
107 }
108 };
109};
110
111exports.wrapEvent = wrapEvent;
112
113var isReducedMotion = function isReducedMotion() {
114 var _window$matchMedia = window.matchMedia("(prefers-reduced-motion: reduce)"),
115 matches = _window$matchMedia.matches;
116
117 return matches;
118};
119
120exports.isReducedMotion = isReducedMotion;
121
122var prefersReducedMotion = function prefersReducedMotion() {
123 return {
124 "@media (prefers-reduced-motion: reduce)": {
125 animation: "none",
126 transition: "none"
127 }
128 };
129};
130
131exports.prefersReducedMotion = prefersReducedMotion;
132
133var isObject = function isObject(input) {
134 return input != null && typeof input === "object" && Object.keys(input).length > 0;
135};
136
137exports.isObject = isObject;
138var inputProps = ["name", "type", "autoFocus", "size", "form", "pattern", "placeholder", "onBlur", "onChange", "onKeyDown", "onKeyUp", "onKeyPress", "onFocus", "id", "autoFocus", "aria-label", "aria-describedby", "aria-labelledby", "min", "max", "maxLength", "minLength", "step", "defaultValue", "value", "isReadOnly", "isFullWidth", "isDisabled", "isInvalid", "isRequired"];
139exports.inputProps = inputProps;
140
141function useVariantColorWarning(label, variantColor) {
142 var theme = (0, _ThemeProvider.useTheme)();
143
144 if (process.env.NODE_ENV !== "production") {
145 var variantColorIsDefined = variantColor != null;
146
147 if (variantColorIsDefined) {
148 var variantColorExists = variantColor in theme.colors; // If variant color exists in theme object
149
150 if (!variantColorExists) {
151 console.warn("You passed an invalid variantColor to the " + label + " Component. Variant color values must be a color key in the theme object that has '100' - '900' color values. Check http://chakra-ui.com/theme#colors to see possible values");
152 } // if variant color exists and is an object
153 // TODO: Check for the 100 - 900 keys
154
155
156 if (variantColorExists) {
157 var colorObj = theme.colors[variantColor];
158 var variantColorIsObject = typeof colorObj === "object" && Object.keys(colorObj).length > 0;
159
160 if (!variantColorIsObject) {
161 console.warn(label + ": The variantColor passed exists in the theme object but is not valid. For a color to be a valid variantColor, it must be an object that has '100' - '900' color values. Use a tool like: \n https://smart-swatch.netlify.com/ to generate color values quickly");
162 }
163 }
164 }
165 }
166}
167
168function cleanChildren(children) {
169 return _react.Children.toArray(children).filter(function (child) {
170 return (0, _react.isValidElement)(child);
171 });
172}
\No newline at end of file