Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-md/states
Advanced tools
@react-md/states - npm Package Compare versions
Comparing version 2.0.0-alpha.12 to 2.0.0-alpha.13
@@ -10,6 +10,6 @@ import React, { createContext, useContext, useMemo, } from "react"; | ||
| /** | ||
| * A simple hook that can be used to get the Ripple context. This is used | ||
| * behind the scenes for the Ripple component and _probably_ shouldn't be | ||
| * used anywhere else. It's mostly used to just use the context defaults when | ||
| * the timeout or classNames are undefined. | ||
| * A simple hook that can be used to get the Ripple context. This is used behind | ||
| * the scenes for the Ripple component and _probably_ shouldn't be used anywhere | ||
| * else. It's mostly used to just use the context defaults when the timeout or | ||
| * classNames are undefined. | ||
| */ | ||
@@ -22,2 +22,3 @@ export function useStatesConfigContext() { | ||
| * context configuration. It'll keep track of: | ||
| * | ||
| * - the current interaction mode of your user | ||
@@ -28,4 +29,4 @@ * - configuration for ripple effects | ||
| */ | ||
| var StatesConfig = function (props) { | ||
| var _a = props, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, children = _a.children; | ||
| function StatesConfig(_a) { | ||
| var _b = _a.rippleTimeout, rippleTimeout = _b === void 0 ? RIPPLE_TIMEOUT : _b, _c = _a.rippleClassNames, rippleClassNames = _c === void 0 ? RIPPLE_CLASS_NAMES : _c, _d = _a.disableRipple, disableRipple = _d === void 0 ? false : _d, _e = _a.disableProgrammaticRipple, disableProgrammaticRipple = _e === void 0 ? false : _e, children = _a.children; | ||
| var value = useMemo(function () { return ({ | ||
@@ -38,17 +39,6 @@ rippleTimeout: rippleTimeout, | ||
| return (React.createElement(StatesConfigContext.Provider, { value: value }, children)); | ||
| }; | ||
| var defaultProps = { | ||
| rippleTimeout: RIPPLE_TIMEOUT, | ||
| rippleClassNames: RIPPLE_CLASS_NAMES, | ||
| disableRipple: false, | ||
| disableProgrammaticRipple: false, | ||
| }; | ||
| StatesConfig.defaultProps = defaultProps; | ||
| } | ||
| if (process.env.NODE_ENV !== "production") { | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| StatesConfig.propTypes = { | ||
@@ -77,4 +67,5 @@ rippleTimeout: PropTypes.oneOfType([ | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default StatesConfig; | ||
| //# sourceMappingURL=StatesConfig.js.map |
@@ -18,25 +18,32 @@ var __assign = (this && this.__assign) || function () { | ||
| /** | ||
| * This is probably one of the most useful hook in react-md. Any functional component component that uses | ||
| * this will gain all the different interaction states based on the states context or any custom overrides. | ||
| * This is probably one of the most useful hook in react-md. Any functional | ||
| * component component that uses this will gain all the different interaction | ||
| * states based on the states context or any custom overrides. | ||
| * | ||
| * The main interaction state is the "ripple" effect when an element has been clicked either via keyboard, | ||
| * mouse, or touch. | ||
| * The main interaction state is the "ripple" effect when an element has been | ||
| * clicked either via keyboard, mouse, or touch. | ||
| * | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing the `:pressed` pseudo-selector | ||
| * state for items so that a different background-color opacity is applied instead of the entire ripple | ||
| * effect. This is polyfilled since the `:pressed` state does not work on anything other than buttons and links | ||
| * by default and it is not triggered on "valid" keyboard clicks with a spacebar. | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing | ||
| * the `:pressed` pseudo-selector state for items so that a different | ||
| * background-color opacity is applied instead of the entire ripple effect. This | ||
| * is polyfilled since the `:pressed` state does not work on anything other than | ||
| * buttons and links by default and it is not triggered on "valid" keyboard | ||
| * clicks with a spacebar. | ||
| * | ||
| * Finally, the element that uses this hook will gain a focused className whenever it gains keyboard focus only. | ||
| * Finally, the element that uses this hook will gain a focused className | ||
| * whenever it gains keyboard focus only. | ||
| * | ||
| * To get all these interaction states to work correctly, this hook returns an object containing: | ||
| * - `handlers`- an object of event handlers that must be passed down to your component to get the different | ||
| * interaction states. All the event handlers are automatically merged with any `handlers` that are provided | ||
| * to this hook so they can all be called if needed. | ||
| * To get all these interaction states to work correctly, this hook returns an | ||
| * object containing: | ||
| * | ||
| * - `handlers`- an object of event handlers that must be passed down to your | ||
| * component to get the different interaction states. All the event handlers | ||
| * are automatically merged with any `handlers` that are provided to this hook | ||
| * so they can all be called if needed. | ||
| * - `className` - the current class name for the element | ||
| * - `ripples` - a renderable element that displays the ripple effects. This will be `null` when ripples are | ||
| * disabled. | ||
| * - `ripples` - a renderable element that displays the ripple effects. This | ||
| * will be `null` when ripples are disabled. | ||
| * | ||
| * @typeparam E The element type for the component being wrapped. This is really just used to "better type" | ||
| * the event handlers. | ||
| * @typeparam E The element type for the component being wrapped. This is really | ||
| * just used to "better type" the event handlers. | ||
| */ | ||
@@ -43,0 +50,0 @@ export default function useInteractionStates(options) { |
| import { useCallback } from "react"; | ||
| import { useRefCache } from "@react-md/utils"; | ||
| /** | ||
| * This small utility function will create an onKeyDown handler that | ||
| * allows the user to "click" an element with the keyboard via Enter | ||
| * or Space. | ||
| * This small utility function will create an onKeyDown handler that allows the | ||
| * user to "click" an element with the keyboard via Enter or Space. | ||
| */ | ||
@@ -8,0 +7,0 @@ export default function useKeyboardClickPolyfill(_a) { |
@@ -16,11 +16,12 @@ var __assign = (this && this.__assign) || function () { | ||
| /** | ||
| * This is a different version of the useRippleStates that will allow you to know | ||
| * when a component is being pressed by the user. This is really just a fallback for | ||
| * when the ripples are disabled. | ||
| * This is a different version of the useRippleStates that will allow you to | ||
| * know when a component is being pressed by the user. This is really just a | ||
| * fallback for when the ripples are disabled. | ||
| * | ||
| * This will return an object containing the current pressed state of the element as well | ||
| * as all the merged eventHandlers required to trigger the different states. | ||
| * This will return an object containing the current pressed state of the | ||
| * element as well as all the merged eventHandlers required to trigger the | ||
| * different states. | ||
| * | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered from | ||
| * a programmatic click event. | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered | ||
| * from a programmatic click event. | ||
| */ | ||
@@ -27,0 +28,0 @@ export default function usePressedStates(_a) { |
@@ -19,6 +19,6 @@ "use strict"; | ||
| /** | ||
| * A simple hook that can be used to get the Ripple context. This is used | ||
| * behind the scenes for the Ripple component and _probably_ shouldn't be | ||
| * used anywhere else. It's mostly used to just use the context defaults when | ||
| * the timeout or classNames are undefined. | ||
| * A simple hook that can be used to get the Ripple context. This is used behind | ||
| * the scenes for the Ripple component and _probably_ shouldn't be used anywhere | ||
| * else. It's mostly used to just use the context defaults when the timeout or | ||
| * classNames are undefined. | ||
| */ | ||
@@ -32,2 +32,3 @@ function useStatesConfigContext() { | ||
| * context configuration. It'll keep track of: | ||
| * | ||
| * - the current interaction mode of your user | ||
@@ -38,4 +39,4 @@ * - configuration for ripple effects | ||
| */ | ||
| var StatesConfig = function (props) { | ||
| var _a = props, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, children = _a.children; | ||
| function StatesConfig(_a) { | ||
| var _b = _a.rippleTimeout, rippleTimeout = _b === void 0 ? contants_1.RIPPLE_TIMEOUT : _b, _c = _a.rippleClassNames, rippleClassNames = _c === void 0 ? contants_1.RIPPLE_CLASS_NAMES : _c, _d = _a.disableRipple, disableRipple = _d === void 0 ? false : _d, _e = _a.disableProgrammaticRipple, disableProgrammaticRipple = _e === void 0 ? false : _e, children = _a.children; | ||
| var value = react_1.useMemo(function () { return ({ | ||
@@ -48,17 +49,6 @@ rippleTimeout: rippleTimeout, | ||
| return (react_1.default.createElement(exports.StatesConfigContext.Provider, { value: value }, children)); | ||
| }; | ||
| var defaultProps = { | ||
| rippleTimeout: contants_1.RIPPLE_TIMEOUT, | ||
| rippleClassNames: contants_1.RIPPLE_CLASS_NAMES, | ||
| disableRipple: false, | ||
| disableProgrammaticRipple: false, | ||
| }; | ||
| StatesConfig.defaultProps = defaultProps; | ||
| } | ||
| if (process.env.NODE_ENV !== "production") { | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| StatesConfig.propTypes = { | ||
@@ -87,4 +77,5 @@ rippleTimeout: PropTypes.oneOfType([ | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = StatesConfig; | ||
| //# sourceMappingURL=StatesConfig.js.map |
@@ -23,25 +23,32 @@ "use strict"; | ||
| /** | ||
| * This is probably one of the most useful hook in react-md. Any functional component component that uses | ||
| * this will gain all the different interaction states based on the states context or any custom overrides. | ||
| * This is probably one of the most useful hook in react-md. Any functional | ||
| * component component that uses this will gain all the different interaction | ||
| * states based on the states context or any custom overrides. | ||
| * | ||
| * The main interaction state is the "ripple" effect when an element has been clicked either via keyboard, | ||
| * mouse, or touch. | ||
| * The main interaction state is the "ripple" effect when an element has been | ||
| * clicked either via keyboard, mouse, or touch. | ||
| * | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing the `:pressed` pseudo-selector | ||
| * state for items so that a different background-color opacity is applied instead of the entire ripple | ||
| * effect. This is polyfilled since the `:pressed` state does not work on anything other than buttons and links | ||
| * by default and it is not triggered on "valid" keyboard clicks with a spacebar. | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing | ||
| * the `:pressed` pseudo-selector state for items so that a different | ||
| * background-color opacity is applied instead of the entire ripple effect. This | ||
| * is polyfilled since the `:pressed` state does not work on anything other than | ||
| * buttons and links by default and it is not triggered on "valid" keyboard | ||
| * clicks with a spacebar. | ||
| * | ||
| * Finally, the element that uses this hook will gain a focused className whenever it gains keyboard focus only. | ||
| * Finally, the element that uses this hook will gain a focused className | ||
| * whenever it gains keyboard focus only. | ||
| * | ||
| * To get all these interaction states to work correctly, this hook returns an object containing: | ||
| * - `handlers`- an object of event handlers that must be passed down to your component to get the different | ||
| * interaction states. All the event handlers are automatically merged with any `handlers` that are provided | ||
| * to this hook so they can all be called if needed. | ||
| * To get all these interaction states to work correctly, this hook returns an | ||
| * object containing: | ||
| * | ||
| * - `handlers`- an object of event handlers that must be passed down to your | ||
| * component to get the different interaction states. All the event handlers | ||
| * are automatically merged with any `handlers` that are provided to this hook | ||
| * so they can all be called if needed. | ||
| * - `className` - the current class name for the element | ||
| * - `ripples` - a renderable element that displays the ripple effects. This will be `null` when ripples are | ||
| * disabled. | ||
| * - `ripples` - a renderable element that displays the ripple effects. This | ||
| * will be `null` when ripples are disabled. | ||
| * | ||
| * @typeparam E The element type for the component being wrapped. This is really just used to "better type" | ||
| * the event handlers. | ||
| * @typeparam E The element type for the component being wrapped. This is really | ||
| * just used to "better type" the event handlers. | ||
| */ | ||
@@ -48,0 +55,0 @@ function useInteractionStates(options) { |
@@ -6,5 +6,4 @@ "use strict"; | ||
| /** | ||
| * This small utility function will create an onKeyDown handler that | ||
| * allows the user to "click" an element with the keyboard via Enter | ||
| * or Space. | ||
| * This small utility function will create an onKeyDown handler that allows the | ||
| * user to "click" an element with the keyboard via Enter or Space. | ||
| */ | ||
@@ -11,0 +10,0 @@ function useKeyboardClickPolyfill(_a) { |
@@ -18,11 +18,12 @@ "use strict"; | ||
| /** | ||
| * This is a different version of the useRippleStates that will allow you to know | ||
| * when a component is being pressed by the user. This is really just a fallback for | ||
| * when the ripples are disabled. | ||
| * This is a different version of the useRippleStates that will allow you to | ||
| * know when a component is being pressed by the user. This is really just a | ||
| * fallback for when the ripples are disabled. | ||
| * | ||
| * This will return an object containing the current pressed state of the element as well | ||
| * as all the merged eventHandlers required to trigger the different states. | ||
| * This will return an object containing the current pressed state of the | ||
| * element as well as all the merged eventHandlers required to trigger the | ||
| * different states. | ||
| * | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered from | ||
| * a programmatic click event. | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered | ||
| * from a programmatic click event. | ||
| */ | ||
@@ -29,0 +30,0 @@ function usePressedStates(_a) { |
| { | ||
| "name": "@react-md/states", | ||
| "version": "2.0.0-alpha.12", | ||
| "version": "2.0.0-alpha.13", | ||
| "description": "A package for adding the different focus, hover, selected, active, etc states to elements", | ||
@@ -38,5 +38,5 @@ "scripts": { | ||
| "dependencies": { | ||
| "@react-md/theme": "^2.0.0-alpha.12", | ||
| "@react-md/transition": "^2.0.0-alpha.12", | ||
| "@react-md/utils": "^2.0.0-alpha.12", | ||
| "@react-md/theme": "^2.0.0-alpha.13", | ||
| "@react-md/transition": "^2.0.0-alpha.13", | ||
| "@react-md/utils": "^2.0.0-alpha.13", | ||
| "react-transition-group": "^4.3.0" | ||
@@ -53,3 +53,3 @@ }, | ||
| }, | ||
| "gitHead": "b31afe8dc076cf0647ac3e99dc0b61f8f4b7b0e2" | ||
| "gitHead": "47959dd8c691deae0310c7cd01b3c275699e6f8c" | ||
| } |
@@ -23,5 +23,5 @@ import { ReactNode } from "react"; | ||
| /** | ||
| * Boolean if the enter keyboard click polyfill should be completely disabled. This is generally | ||
| * used if the keyboard functionality is already built-in to the element like buttons | ||
| * or labels. | ||
| * Boolean if the enter keyboard click polyfill should be completely disabled. | ||
| * This is generally used if the keyboard functionality is already built-in to | ||
| * the element like buttons or labels. | ||
| */ | ||
@@ -31,9 +31,9 @@ disableEnterClick?: boolean; | ||
| /** | ||
| * Boolean if the spacebar should not trigger a click event when using the user | ||
| * pressed spacebar on a focusable element. You _normally_ want the spacebar to | ||
| * also trigger a click event , but there are a few cases where it should not | ||
| * (like custom links). | ||
| * Boolean if the spacebar should not trigger a click event when using the | ||
| * user pressed spacebar on a focusable element. You _normally_ want the | ||
| * spacebar to also trigger a click event , but there are a few cases where it | ||
| * should not (like custom links). | ||
| * | ||
| * When this is disabled, it will also make sure that the ripple and pressed effects | ||
| * are not triggered from a spacebar click. | ||
| * When this is disabled, it will also make sure that the ripple and pressed | ||
| * effects are not triggered from a spacebar click. | ||
| * | ||
@@ -45,4 +45,4 @@ * @default false | ||
| /** | ||
| * Boolean if the component should fallback to using the custom pressed class names when ripples are | ||
| * disabled. | ||
| * Boolean if the component should fallback to using the custom pressed class | ||
| * names when ripples are disabled. | ||
| * | ||
@@ -54,5 +54,5 @@ * @default false | ||
| /** | ||
| * Boolean if the element should be able to gain both the ripple effect and the | ||
| * pressed states changes. This will only be enabled if both the `disableRipple` | ||
| * and `disabledPressedFallback` are still `false` | ||
| * Boolean if the element should be able to gain both the ripple effect and | ||
| * the pressed states changes. This will only be enabled if both the | ||
| * `disableRipple` and `disabledPressedFallback` are still `false` | ||
| */ | ||
@@ -69,25 +69,32 @@ enablePressedAndRipple?: boolean; | ||
| /** | ||
| * This is probably one of the most useful hook in react-md. Any functional component component that uses | ||
| * this will gain all the different interaction states based on the states context or any custom overrides. | ||
| * This is probably one of the most useful hook in react-md. Any functional | ||
| * component component that uses this will gain all the different interaction | ||
| * states based on the states context or any custom overrides. | ||
| * | ||
| * The main interaction state is the "ripple" effect when an element has been clicked either via keyboard, | ||
| * mouse, or touch. | ||
| * The main interaction state is the "ripple" effect when an element has been | ||
| * clicked either via keyboard, mouse, or touch. | ||
| * | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing the `:pressed` pseudo-selector | ||
| * state for items so that a different background-color opacity is applied instead of the entire ripple | ||
| * effect. This is polyfilled since the `:pressed` state does not work on anything other than buttons and links | ||
| * by default and it is not triggered on "valid" keyboard clicks with a spacebar. | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing | ||
| * the `:pressed` pseudo-selector state for items so that a different | ||
| * background-color opacity is applied instead of the entire ripple effect. This | ||
| * is polyfilled since the `:pressed` state does not work on anything other than | ||
| * buttons and links by default and it is not triggered on "valid" keyboard | ||
| * clicks with a spacebar. | ||
| * | ||
| * Finally, the element that uses this hook will gain a focused className whenever it gains keyboard focus only. | ||
| * Finally, the element that uses this hook will gain a focused className | ||
| * whenever it gains keyboard focus only. | ||
| * | ||
| * To get all these interaction states to work correctly, this hook returns an object containing: | ||
| * - `handlers`- an object of event handlers that must be passed down to your component to get the different | ||
| * interaction states. All the event handlers are automatically merged with any `handlers` that are provided | ||
| * to this hook so they can all be called if needed. | ||
| * To get all these interaction states to work correctly, this hook returns an | ||
| * object containing: | ||
| * | ||
| * - `handlers`- an object of event handlers that must be passed down to your | ||
| * component to get the different interaction states. All the event handlers | ||
| * are automatically merged with any `handlers` that are provided to this hook | ||
| * so they can all be called if needed. | ||
| * - `className` - the current class name for the element | ||
| * - `ripples` - a renderable element that displays the ripple effects. This will be `null` when ripples are | ||
| * disabled. | ||
| * - `ripples` - a renderable element that displays the ripple effects. This | ||
| * will be `null` when ripples are disabled. | ||
| * | ||
| * @typeparam E The element type for the component being wrapped. This is really just used to "better type" | ||
| * the event handlers. | ||
| * @typeparam E The element type for the component being wrapped. This is really | ||
| * just used to "better type" the event handlers. | ||
| */ | ||
@@ -94,0 +101,0 @@ export default function useInteractionStates< |
@@ -6,5 +6,5 @@ import { useCallback } from "react"; | ||
| /** | ||
| * Boolean if the keyboard click handler should be disabled. This will make | ||
| * it so the return value is just the provided `onKeyDown` handler or | ||
| * undefined if it was omitted | ||
| * Boolean if the keyboard click handler should be disabled. This will make it | ||
| * so the return value is just the provided `onKeyDown` handler or undefined | ||
| * if it was omitted | ||
| */ | ||
@@ -20,4 +20,4 @@ disabled?: boolean; | ||
| /** | ||
| * Boolean if the user should not be able to click the element with the | ||
| * space key. This should normally only be set to `true` for link elements. | ||
| * Boolean if the user should not be able to click the element with the space | ||
| * key. This should normally only be set to `true` for link elements. | ||
| */ | ||
@@ -27,4 +27,4 @@ disableSpacebarClick?: boolean; | ||
| /** | ||
| * An optional onKeyDown event handler that should be merged with the | ||
| * keyboard click polyfill | ||
| * An optional onKeyDown event handler that should be merged with the keyboard | ||
| * click polyfill | ||
| */ | ||
@@ -35,5 +35,4 @@ onKeyDown?: React.KeyboardEventHandler<E>; | ||
| /** | ||
| * This small utility function will create an onKeyDown handler that | ||
| * allows the user to "click" an element with the keyboard via Enter | ||
| * or Space. | ||
| * This small utility function will create an onKeyDown handler that allows the | ||
| * user to "click" an element with the keyboard via Enter or Space. | ||
| */ | ||
@@ -40,0 +39,0 @@ export default function useKeyboardClickPolyfill< |
@@ -18,11 +18,12 @@ import { useCallback, useState } from "react"; | ||
| /** | ||
| * This is a different version of the useRippleStates that will allow you to know | ||
| * when a component is being pressed by the user. This is really just a fallback for | ||
| * when the ripples are disabled. | ||
| * This is a different version of the useRippleStates that will allow you to | ||
| * know when a component is being pressed by the user. This is really just a | ||
| * fallback for when the ripples are disabled. | ||
| * | ||
| * This will return an object containing the current pressed state of the element as well | ||
| * as all the merged eventHandlers required to trigger the different states. | ||
| * This will return an object containing the current pressed state of the | ||
| * element as well as all the merged eventHandlers required to trigger the | ||
| * different states. | ||
| * | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered from | ||
| * a programmatic click event. | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered | ||
| * from a programmatic click event. | ||
| */ | ||
@@ -29,0 +30,0 @@ export default function usePressedStates<E extends HTMLElement = HTMLElement>({ |
@@ -1,2 +0,2 @@ | ||
| import React, { FC, ReactNode } from "react"; | ||
| import React, { ReactElement, ReactNode } from "react"; | ||
| import { CSSTransitionClassNames } from "react-transition-group/CSSTransition"; | ||
@@ -10,9 +10,9 @@ import { TransitionTimeout } from "@react-md/transition"; | ||
| * The amount of time before a ripple finishes its animation. You probably | ||
| * don't want to change this value unless you updated the duration in scss | ||
| * or changed the different class names for the ripple animation. | ||
| * don't want to change this value unless you updated the duration in scss or | ||
| * changed the different class names for the ripple animation. | ||
| */ | ||
| rippleTimeout: TransitionTimeout; | ||
| /** | ||
| * The class names to apply during the different stages for the ripple animation. | ||
| * You probably don't want to use this. | ||
| * The class names to apply during the different stages for the ripple | ||
| * animation. You probably don't want to use this. | ||
| */ | ||
@@ -26,5 +26,5 @@ rippleClassNames: CSSTransitionClassNames; | ||
| /** | ||
| * Boolean if the ripple component should not be triggered after a "programmatic" | ||
| * ripple effect. This would be if the `.click()` function is called on an element | ||
| * through javascript or some other means. | ||
| * Boolean if the ripple component should not be triggered after a | ||
| * "programmatic" ripple effect. This would be if the `.click()` function is | ||
| * called on an element through javascript or some other means. | ||
| */ | ||
@@ -35,6 +35,6 @@ disableProgrammaticRipple: boolean; | ||
| /** | ||
| * A simple hook that can be used to get the Ripple context. This is used | ||
| * behind the scenes for the Ripple component and _probably_ shouldn't be | ||
| * used anywhere else. It's mostly used to just use the context defaults when | ||
| * the timeout or classNames are undefined. | ||
| * A simple hook that can be used to get the Ripple context. This is used behind | ||
| * the scenes for the Ripple component and _probably_ shouldn't be used anywhere | ||
| * else. It's mostly used to just use the context defaults when the timeout or | ||
| * classNames are undefined. | ||
| */ | ||
@@ -48,2 +48,3 @@ export declare function useStatesConfigContext(): StatesConfigContextType; | ||
| * context configuration. It'll keep track of: | ||
| * | ||
| * - the current interaction mode of your user | ||
@@ -54,3 +55,12 @@ * - configuration for ripple effects | ||
| */ | ||
| declare const StatesConfig: FC<StatesConfigProps>; | ||
| declare function StatesConfig({ rippleTimeout, rippleClassNames, disableRipple, disableProgrammaticRipple, children, }: StatesConfigProps): ReactElement; | ||
| declare namespace StatesConfig { | ||
| var propTypes: { | ||
| rippleTimeout: any; | ||
| rippleClassNames: any; | ||
| disableRipple: any; | ||
| disableProgrammaticRipple: any; | ||
| children: any; | ||
| }; | ||
| } | ||
| export default StatesConfig; |
@@ -10,15 +10,15 @@ import { ReactNode } from "react"; | ||
| /** | ||
| * Boolean if the enter keyboard click polyfill should be completely disabled. This is generally | ||
| * used if the keyboard functionality is already built-in to the element like buttons | ||
| * or labels. | ||
| * Boolean if the enter keyboard click polyfill should be completely disabled. | ||
| * This is generally used if the keyboard functionality is already built-in to | ||
| * the element like buttons or labels. | ||
| */ | ||
| disableEnterClick?: boolean; | ||
| /** | ||
| * Boolean if the spacebar should not trigger a click event when using the user | ||
| * pressed spacebar on a focusable element. You _normally_ want the spacebar to | ||
| * also trigger a click event , but there are a few cases where it should not | ||
| * (like custom links). | ||
| * Boolean if the spacebar should not trigger a click event when using the | ||
| * user pressed spacebar on a focusable element. You _normally_ want the | ||
| * spacebar to also trigger a click event , but there are a few cases where it | ||
| * should not (like custom links). | ||
| * | ||
| * When this is disabled, it will also make sure that the ripple and pressed effects | ||
| * are not triggered from a spacebar click. | ||
| * When this is disabled, it will also make sure that the ripple and pressed | ||
| * effects are not triggered from a spacebar click. | ||
| * | ||
@@ -29,4 +29,4 @@ * @default false | ||
| /** | ||
| * Boolean if the component should fallback to using the custom pressed class names when ripples are | ||
| * disabled. | ||
| * Boolean if the component should fallback to using the custom pressed class | ||
| * names when ripples are disabled. | ||
| * | ||
@@ -37,5 +37,5 @@ * @default false | ||
| /** | ||
| * Boolean if the element should be able to gain both the ripple effect and the | ||
| * pressed states changes. This will only be enabled if both the `disableRipple` | ||
| * and `disabledPressedFallback` are still `false` | ||
| * Boolean if the element should be able to gain both the ripple effect and | ||
| * the pressed states changes. This will only be enabled if both the | ||
| * `disableRipple` and `disabledPressedFallback` are still `false` | ||
| */ | ||
@@ -50,27 +50,34 @@ enablePressedAndRipple?: boolean; | ||
| /** | ||
| * This is probably one of the most useful hook in react-md. Any functional component component that uses | ||
| * this will gain all the different interaction states based on the states context or any custom overrides. | ||
| * This is probably one of the most useful hook in react-md. Any functional | ||
| * component component that uses this will gain all the different interaction | ||
| * states based on the states context or any custom overrides. | ||
| * | ||
| * The main interaction state is the "ripple" effect when an element has been clicked either via keyboard, | ||
| * mouse, or touch. | ||
| * The main interaction state is the "ripple" effect when an element has been | ||
| * clicked either via keyboard, mouse, or touch. | ||
| * | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing the `:pressed` pseudo-selector | ||
| * state for items so that a different background-color opacity is applied instead of the entire ripple | ||
| * effect. This is polyfilled since the `:pressed` state does not work on anything other than buttons and links | ||
| * by default and it is not triggered on "valid" keyboard clicks with a spacebar. | ||
| * If the ripple effect is disabled, it will fallback to "polyfilling"/fixing | ||
| * the `:pressed` pseudo-selector state for items so that a different | ||
| * background-color opacity is applied instead of the entire ripple effect. This | ||
| * is polyfilled since the `:pressed` state does not work on anything other than | ||
| * buttons and links by default and it is not triggered on "valid" keyboard | ||
| * clicks with a spacebar. | ||
| * | ||
| * Finally, the element that uses this hook will gain a focused className whenever it gains keyboard focus only. | ||
| * Finally, the element that uses this hook will gain a focused className | ||
| * whenever it gains keyboard focus only. | ||
| * | ||
| * To get all these interaction states to work correctly, this hook returns an object containing: | ||
| * - `handlers`- an object of event handlers that must be passed down to your component to get the different | ||
| * interaction states. All the event handlers are automatically merged with any `handlers` that are provided | ||
| * to this hook so they can all be called if needed. | ||
| * To get all these interaction states to work correctly, this hook returns an | ||
| * object containing: | ||
| * | ||
| * - `handlers`- an object of event handlers that must be passed down to your | ||
| * component to get the different interaction states. All the event handlers | ||
| * are automatically merged with any `handlers` that are provided to this hook | ||
| * so they can all be called if needed. | ||
| * - `className` - the current class name for the element | ||
| * - `ripples` - a renderable element that displays the ripple effects. This will be `null` when ripples are | ||
| * disabled. | ||
| * - `ripples` - a renderable element that displays the ripple effects. This | ||
| * will be `null` when ripples are disabled. | ||
| * | ||
| * @typeparam E The element type for the component being wrapped. This is really just used to "better type" | ||
| * the event handlers. | ||
| * @typeparam E The element type for the component being wrapped. This is really | ||
| * just used to "better type" the event handlers. | ||
| */ | ||
| export default function useInteractionStates<E extends HTMLElement = HTMLElement>(options?: InteractionStatesOptions<E>): ReturnValue<E>; | ||
| export {}; |
| /// <reference types="react" /> | ||
| interface Options<E extends HTMLElement> { | ||
| /** | ||
| * Boolean if the keyboard click handler should be disabled. This will make | ||
| * it so the return value is just the provided `onKeyDown` handler or | ||
| * undefined if it was omitted | ||
| * Boolean if the keyboard click handler should be disabled. This will make it | ||
| * so the return value is just the provided `onKeyDown` handler or undefined | ||
| * if it was omitted | ||
| */ | ||
@@ -15,9 +15,9 @@ disabled?: boolean; | ||
| /** | ||
| * Boolean if the user should not be able to click the element with the | ||
| * space key. This should normally only be set to `true` for link elements. | ||
| * Boolean if the user should not be able to click the element with the space | ||
| * key. This should normally only be set to `true` for link elements. | ||
| */ | ||
| disableSpacebarClick?: boolean; | ||
| /** | ||
| * An optional onKeyDown event handler that should be merged with the | ||
| * keyboard click polyfill | ||
| * An optional onKeyDown event handler that should be merged with the keyboard | ||
| * click polyfill | ||
| */ | ||
@@ -27,7 +27,6 @@ onKeyDown?: React.KeyboardEventHandler<E>; | ||
| /** | ||
| * This small utility function will create an onKeyDown handler that | ||
| * allows the user to "click" an element with the keyboard via Enter | ||
| * or Space. | ||
| * This small utility function will create an onKeyDown handler that allows the | ||
| * user to "click" an element with the keyboard via Enter or Space. | ||
| */ | ||
| export default function useKeyboardClickPolyfill<E extends HTMLElement = HTMLElement>({ onKeyDown, disabled, disableEnterClick, disableSpacebarClick, }?: Options<E>): React.KeyboardEventHandler<E> | undefined; | ||
| export {}; |
@@ -11,13 +11,14 @@ import { MergableRippleHandlers } from "./ripples/types"; | ||
| /** | ||
| * This is a different version of the useRippleStates that will allow you to know | ||
| * when a component is being pressed by the user. This is really just a fallback for | ||
| * when the ripples are disabled. | ||
| * This is a different version of the useRippleStates that will allow you to | ||
| * know when a component is being pressed by the user. This is really just a | ||
| * fallback for when the ripples are disabled. | ||
| * | ||
| * This will return an object containing the current pressed state of the element as well | ||
| * as all the merged eventHandlers required to trigger the different states. | ||
| * This will return an object containing the current pressed state of the | ||
| * element as well as all the merged eventHandlers required to trigger the | ||
| * different states. | ||
| * | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered from | ||
| * a programmatic click event. | ||
| * NOTE: Unlike the ripple effect, this pressed states will not be triggered | ||
| * from a programmatic click event. | ||
| */ | ||
| export default function usePressedStates<E extends HTMLElement = HTMLElement>({ handlers, disableSpacebarClick, }?: PressedStatesOptions<E>): ReturnValue<E>; | ||
| export {}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.19%
639983
- Lines of code
- increased by0.22%
4658