Socket
Book a DemoInstallSign in
Socket

@nextui-org/button

Package Overview
Dependencies
Maintainers
1
Versions
547
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nextui-org/button - npm Package Compare versions

Comparing version

to
0.0.0-dev-v2-20230409142211

dist/chunk-RHDHJEXP.mjs

110

dist/button.js

@@ -32,4 +32,4 @@ "use strict";

var import_react = require("react");
var import_focus2 = require("@react-aria/focus");
var import_utils3 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_utils = require("@react-aria/utils");
var import_drip = require("@nextui-org/drip");

@@ -39,76 +39,4 @@ var import_dom_utils = require("@nextui-org/dom-utils");

var import_react2 = require("react");
var import_use_aria_button = require("@nextui-org/use-aria-button");
// src/use-aria-button.ts
var import_utils = require("@react-aria/utils");
var import_utils2 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_interactions = require("@react-aria/interactions");
function useButton(props, ref) {
let {
elementType = "button",
isDisabled,
onPress,
onPressStart,
onPressEnd,
onPressChange,
preventFocusOnPress,
allowFocusWhenDisabled,
onClick: deprecatedOnClick,
href,
target,
rel,
type = "button"
} = props;
let additionalProps;
if (elementType === "button") {
additionalProps = {
type,
disabled: isDisabled
};
} else {
additionalProps = {
role: "button",
tabIndex: isDisabled ? void 0 : 0,
href: elementType === "a" && isDisabled ? void 0 : href,
target: elementType === "a" ? target : void 0,
type: elementType === "input" ? type : void 0,
disabled: elementType === "input" ? isDisabled : void 0,
"aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
rel: elementType === "a" ? rel : void 0
};
}
let { pressProps, isPressed } = (0, import_interactions.usePress)({
onPressStart,
onPressEnd,
onPressChange,
onPress,
isDisabled,
preventFocusOnPress,
ref
});
let { focusableProps } = (0, import_focus.useFocusable)(props, ref);
if (allowFocusWhenDisabled) {
focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
}
let buttonProps = (0, import_utils2.mergeProps)(
focusableProps,
pressProps,
(0, import_utils.filterDOMProps)(props, { labelable: true })
);
return {
isPressed,
buttonProps: (0, import_utils2.mergeProps)(additionalProps, buttonProps, {
"aria-haspopup": props["aria-haspopup"],
"aria-expanded": props["aria-expanded"],
"aria-controls": props["aria-controls"],
"aria-pressed": props["aria-pressed"],
onClick: (e) => {
if (deprecatedOnClick) {
deprecatedOnClick(e);
}
}
})
};
}
// src/button-group-context.ts

@@ -122,3 +50,3 @@ var import_shared_utils = require("@nextui-org/shared-utils");

// src/use-button.ts
function useButton2(props) {
function useButton(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;

@@ -131,4 +59,4 @@ const groupContext = useButtonGroupContext();

children,
leftIcon: leftIconProp,
rightIcon: rightIconProp,
startIcon: startIconProp,
endIcon: endIconProp,
autoFocus,

@@ -151,3 +79,3 @@ className,

const domRef = (0, import_dom_utils.useDOMRef)(ref);
const { isFocusVisible, isFocused, focusProps } = (0, import_focus2.useFocusRing)({
const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)({
autoFocus

@@ -189,3 +117,3 @@ });

};
const { buttonProps: ariaButtonProps } = useButton(
const { buttonProps: ariaButtonProps } = (0, import_use_aria_button.useAriaButton)(
{

@@ -195,3 +123,3 @@ elementType: as,

onPress,
onClick: (0, import_utils3.chain)(onClick, handleDrip),
onClick: (0, import_utils.chain)(onClick, handleDrip),
...otherProps

@@ -206,3 +134,3 @@ },

"data-focused": (0, import_shared_utils2.dataAttr)(isFocused),
...(0, import_utils3.mergeProps)(ariaButtonProps, focusProps, otherProps)
...(0, import_utils.mergeProps)(ariaButtonProps, focusProps, otherProps)
}),

@@ -216,4 +144,4 @@ [ariaButtonProps, focusProps, otherProps]

}) : null;
const leftIcon = getIconClone(leftIconProp);
const rightIcon = getIconClone(rightIconProp);
const startIcon = getIconClone(startIconProp);
const endIcon = getIconClone(endIconProp);
return {

@@ -225,4 +153,4 @@ Component,

styles,
leftIcon,
rightIcon,
startIcon,
endIcon,
disableRipple,

@@ -242,7 +170,7 @@ getButtonProps

drips,
leftIcon,
rightIcon,
startIcon,
endIcon,
disableRipple,
getButtonProps
} = useButton2({
} = useButton({
ref,

@@ -252,5 +180,5 @@ ...props

return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, { ref: domRef, className: styles, ...getButtonProps(), children: [
leftIcon,
startIcon,
children,
rightIcon,
endIcon,
!disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drip2.Drip, { drips })

@@ -257,0 +185,0 @@ ] });

@@ -25,3 +25,3 @@ "use strict";

ButtonGroup: () => button_group_default,
useButton: () => useButton2,
useButton: () => useButton,
useButtonGroup: () => useButtonGroup

@@ -38,4 +38,4 @@ });

var import_react = require("react");
var import_focus2 = require("@react-aria/focus");
var import_utils3 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_utils = require("@react-aria/utils");
var import_drip = require("@nextui-org/drip");

@@ -45,76 +45,4 @@ var import_dom_utils = require("@nextui-org/dom-utils");

var import_react2 = require("react");
var import_use_aria_button = require("@nextui-org/use-aria-button");
// src/use-aria-button.ts
var import_utils = require("@react-aria/utils");
var import_utils2 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_interactions = require("@react-aria/interactions");
function useButton(props, ref) {
let {
elementType = "button",
isDisabled,
onPress,
onPressStart,
onPressEnd,
onPressChange,
preventFocusOnPress,
allowFocusWhenDisabled,
onClick: deprecatedOnClick,
href,
target,
rel,
type = "button"
} = props;
let additionalProps;
if (elementType === "button") {
additionalProps = {
type,
disabled: isDisabled
};
} else {
additionalProps = {
role: "button",
tabIndex: isDisabled ? void 0 : 0,
href: elementType === "a" && isDisabled ? void 0 : href,
target: elementType === "a" ? target : void 0,
type: elementType === "input" ? type : void 0,
disabled: elementType === "input" ? isDisabled : void 0,
"aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
rel: elementType === "a" ? rel : void 0
};
}
let { pressProps, isPressed } = (0, import_interactions.usePress)({
onPressStart,
onPressEnd,
onPressChange,
onPress,
isDisabled,
preventFocusOnPress,
ref
});
let { focusableProps } = (0, import_focus.useFocusable)(props, ref);
if (allowFocusWhenDisabled) {
focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
}
let buttonProps = (0, import_utils2.mergeProps)(
focusableProps,
pressProps,
(0, import_utils.filterDOMProps)(props, { labelable: true })
);
return {
isPressed,
buttonProps: (0, import_utils2.mergeProps)(additionalProps, buttonProps, {
"aria-haspopup": props["aria-haspopup"],
"aria-expanded": props["aria-expanded"],
"aria-controls": props["aria-controls"],
"aria-pressed": props["aria-pressed"],
onClick: (e) => {
if (deprecatedOnClick) {
deprecatedOnClick(e);
}
}
})
};
}
// src/button-group-context.ts

@@ -128,3 +56,3 @@ var import_shared_utils = require("@nextui-org/shared-utils");

// src/use-button.ts
function useButton2(props) {
function useButton(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;

@@ -137,4 +65,4 @@ const groupContext = useButtonGroupContext();

children,
leftIcon: leftIconProp,
rightIcon: rightIconProp,
startIcon: startIconProp,
endIcon: endIconProp,
autoFocus,

@@ -157,3 +85,3 @@ className,

const domRef = (0, import_dom_utils.useDOMRef)(ref);
const { isFocusVisible, isFocused, focusProps } = (0, import_focus2.useFocusRing)({
const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)({
autoFocus

@@ -195,3 +123,3 @@ });

};
const { buttonProps: ariaButtonProps } = useButton(
const { buttonProps: ariaButtonProps } = (0, import_use_aria_button.useAriaButton)(
{

@@ -201,3 +129,3 @@ elementType: as,

onPress,
onClick: (0, import_utils3.chain)(onClick, handleDrip),
onClick: (0, import_utils.chain)(onClick, handleDrip),
...otherProps

@@ -212,3 +140,3 @@ },

"data-focused": (0, import_shared_utils2.dataAttr)(isFocused),
...(0, import_utils3.mergeProps)(ariaButtonProps, focusProps, otherProps)
...(0, import_utils.mergeProps)(ariaButtonProps, focusProps, otherProps)
}),

@@ -222,4 +150,4 @@ [ariaButtonProps, focusProps, otherProps]

}) : null;
const leftIcon = getIconClone(leftIconProp);
const rightIcon = getIconClone(rightIconProp);
const startIcon = getIconClone(startIconProp);
const endIcon = getIconClone(endIconProp);
return {

@@ -231,4 +159,4 @@ Component,

styles,
leftIcon,
rightIcon,
startIcon,
endIcon,
disableRipple,

@@ -248,7 +176,7 @@ getButtonProps

drips,
leftIcon,
rightIcon,
startIcon,
endIcon,
disableRipple,
getButtonProps
} = useButton2({
} = useButton({
ref,

@@ -258,5 +186,5 @@ ...props

return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, { ref: domRef, className: styles, ...getButtonProps(), children: [
leftIcon,
startIcon,
children,
rightIcon,
endIcon,
!disableRipple && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drip2.Drip, { drips })

@@ -263,0 +191,0 @@ ] });

@@ -21,9 +21,9 @@ import * as _nextui_org_drip_src_use_drip from '@nextui-org/drip/src/use-drip';

/**
* The button left content.
* The button start content.
*/
leftIcon?: ReactNode;
startIcon?: ReactNode;
/**
* The button right content.
* The button end content.
*/
rightIcon?: ReactNode;
endIcon?: ReactNode;
/**

@@ -41,4 +41,4 @@ * The native button click event handler.

styles: string;
leftIcon: react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | null;
rightIcon: react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | null;
startIcon: react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | null;
endIcon: react.DetailedReactHTMLElement<react.HTMLAttributes<HTMLElement>, HTMLElement> | null;
disableRipple: boolean;

@@ -45,0 +45,0 @@ getButtonProps: PropGetter<Record<string, unknown>, _nextui_org_system.DOMAttributes<_nextui_org_system.DOMElement>>;

@@ -23,3 +23,3 @@ "use strict";

__export(use_button_exports, {
useButton: () => useButton2
useButton: () => useButton
});

@@ -29,4 +29,4 @@ module.exports = __toCommonJS(use_button_exports);

var import_react = require("react");
var import_focus2 = require("@react-aria/focus");
var import_utils3 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_utils = require("@react-aria/utils");
var import_drip = require("@nextui-org/drip");

@@ -36,76 +36,4 @@ var import_dom_utils = require("@nextui-org/dom-utils");

var import_react2 = require("react");
var import_use_aria_button = require("@nextui-org/use-aria-button");
// src/use-aria-button.ts
var import_utils = require("@react-aria/utils");
var import_utils2 = require("@react-aria/utils");
var import_focus = require("@react-aria/focus");
var import_interactions = require("@react-aria/interactions");
function useButton(props, ref) {
let {
elementType = "button",
isDisabled,
onPress,
onPressStart,
onPressEnd,
onPressChange,
preventFocusOnPress,
allowFocusWhenDisabled,
onClick: deprecatedOnClick,
href,
target,
rel,
type = "button"
} = props;
let additionalProps;
if (elementType === "button") {
additionalProps = {
type,
disabled: isDisabled
};
} else {
additionalProps = {
role: "button",
tabIndex: isDisabled ? void 0 : 0,
href: elementType === "a" && isDisabled ? void 0 : href,
target: elementType === "a" ? target : void 0,
type: elementType === "input" ? type : void 0,
disabled: elementType === "input" ? isDisabled : void 0,
"aria-disabled": !isDisabled || elementType === "input" ? void 0 : isDisabled,
rel: elementType === "a" ? rel : void 0
};
}
let { pressProps, isPressed } = (0, import_interactions.usePress)({
onPressStart,
onPressEnd,
onPressChange,
onPress,
isDisabled,
preventFocusOnPress,
ref
});
let { focusableProps } = (0, import_focus.useFocusable)(props, ref);
if (allowFocusWhenDisabled) {
focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
}
let buttonProps = (0, import_utils2.mergeProps)(
focusableProps,
pressProps,
(0, import_utils.filterDOMProps)(props, { labelable: true })
);
return {
isPressed,
buttonProps: (0, import_utils2.mergeProps)(additionalProps, buttonProps, {
"aria-haspopup": props["aria-haspopup"],
"aria-expanded": props["aria-expanded"],
"aria-controls": props["aria-controls"],
"aria-pressed": props["aria-pressed"],
onClick: (e) => {
if (deprecatedOnClick) {
deprecatedOnClick(e);
}
}
})
};
}
// src/button-group-context.ts

@@ -119,3 +47,3 @@ var import_shared_utils = require("@nextui-org/shared-utils");

// src/use-button.ts
function useButton2(props) {
function useButton(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i;

@@ -128,4 +56,4 @@ const groupContext = useButtonGroupContext();

children,
leftIcon: leftIconProp,
rightIcon: rightIconProp,
startIcon: startIconProp,
endIcon: endIconProp,
autoFocus,

@@ -148,3 +76,3 @@ className,

const domRef = (0, import_dom_utils.useDOMRef)(ref);
const { isFocusVisible, isFocused, focusProps } = (0, import_focus2.useFocusRing)({
const { isFocusVisible, isFocused, focusProps } = (0, import_focus.useFocusRing)({
autoFocus

@@ -186,3 +114,3 @@ });

};
const { buttonProps: ariaButtonProps } = useButton(
const { buttonProps: ariaButtonProps } = (0, import_use_aria_button.useAriaButton)(
{

@@ -192,3 +120,3 @@ elementType: as,

onPress,
onClick: (0, import_utils3.chain)(onClick, handleDrip),
onClick: (0, import_utils.chain)(onClick, handleDrip),
...otherProps

@@ -203,3 +131,3 @@ },

"data-focused": (0, import_shared_utils2.dataAttr)(isFocused),
...(0, import_utils3.mergeProps)(ariaButtonProps, focusProps, otherProps)
...(0, import_utils.mergeProps)(ariaButtonProps, focusProps, otherProps)
}),

@@ -213,4 +141,4 @@ [ariaButtonProps, focusProps, otherProps]

}) : null;
const leftIcon = getIconClone(leftIconProp);
const rightIcon = getIconClone(rightIconProp);
const startIcon = getIconClone(startIconProp);
const endIcon = getIconClone(endIconProp);
return {

@@ -222,4 +150,4 @@ Component,

styles,
leftIcon,
rightIcon,
startIcon,
endIcon,
disableRipple,

@@ -226,0 +154,0 @@ getButtonProps

{
"name": "@nextui-org/button",
"version": "0.0.0-dev-v2-20230409022144",
"version": "0.0.0-dev-v2-20230409142211",
"description": "Buttons allow users to perform actions and choose with a single tap.",

@@ -35,8 +35,9 @@ "keywords": [

"@react-aria/focus": "^3.12.0",
"@nextui-org/system": "0.0.0-dev-v2-20230409022144",
"@nextui-org/shared-utils": "0.0.0-dev-v2-20230409022144",
"@nextui-org/dom-utils": "0.0.0-dev-v2-20230409022144",
"@nextui-org/theme": "0.0.0-dev-v2-20230409022144",
"@nextui-org/drip": "0.0.0-dev-v2-20230409022144",
"@nextui-org/spinner": "0.0.0-dev-v2-20230409022144"
"@nextui-org/system": "0.0.0-dev-v2-20230409142211",
"@nextui-org/shared-utils": "0.0.0-dev-v2-20230409142211",
"@nextui-org/use-aria-button": "2.0.0-beta.1",
"@nextui-org/dom-utils": "0.0.0-dev-v2-20230409142211",
"@nextui-org/theme": "0.0.0-dev-v2-20230409142211",
"@nextui-org/drip": "0.0.0-dev-v2-20230409142211",
"@nextui-org/spinner": "0.0.0-dev-v2-20230409142211"
},

@@ -48,4 +49,4 @@ "devDependencies": {

"react": "^18.0.0",
"@nextui-org/spinner": "0.0.0-dev-v2-20230409022144",
"@nextui-org/shared-icons": "0.0.0-dev-v2-20230409022144"
"@nextui-org/spinner": "0.0.0-dev-v2-20230409142211",
"@nextui-org/shared-icons": "0.0.0-dev-v2-20230409142211"
},

@@ -52,0 +53,0 @@ "clean-package": "../../../clean-package.config.json",

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

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.