@negative-space/button 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +9 -1
  2. package/dist/index.d.ts +9 -1
  3. package/dist/index.js +10 -5
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +10 -5
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -3,7 +3,14 @@ import { SpinnerProps } from '@negative-space/spinner';
3
3
  import { ClickableAnimation } from '@negative-space/system';
4
4
  import React from 'react';
5
5
 
6
- interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style'> {
6
+ type ButtonAccessibility = {
7
+ children: React.ReactNode;
8
+ ariaLabel?: string | false;
9
+ } | {
10
+ children?: never;
11
+ ariaLabel: string;
12
+ };
13
+ interface ButtonBaseProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style' | 'aria-label'> {
7
14
  prefix?: React.ReactNode;
8
15
  suffix?: React.ReactNode;
9
16
  classNames?: {
@@ -26,6 +33,7 @@ interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'class
26
33
  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
27
34
  spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>;
28
35
  }
36
+ type ButtonProps = ButtonBaseProps & ButtonAccessibility;
29
37
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
30
38
 
31
39
  interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
package/dist/index.d.ts CHANGED
@@ -3,7 +3,14 @@ import { SpinnerProps } from '@negative-space/spinner';
3
3
  import { ClickableAnimation } from '@negative-space/system';
4
4
  import React from 'react';
5
5
 
6
- interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style'> {
6
+ type ButtonAccessibility = {
7
+ children: React.ReactNode;
8
+ ariaLabel?: string | false;
9
+ } | {
10
+ children?: never;
11
+ ariaLabel: string;
12
+ };
13
+ interface ButtonBaseProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'className' | 'style' | 'aria-label'> {
7
14
  prefix?: React.ReactNode;
8
15
  suffix?: React.ReactNode;
9
16
  classNames?: {
@@ -26,6 +33,7 @@ interface ButtonProps extends Omit<FlexProps<'button'>, 'as' | 'prefix' | 'class
26
33
  spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix';
27
34
  spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>;
28
35
  }
36
+ type ButtonProps = ButtonBaseProps & ButtonAccessibility;
29
37
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
30
38
 
31
39
  interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
package/dist/index.js CHANGED
@@ -38,6 +38,7 @@ var Button = React__default.default.forwardRef(
38
38
  spinnerProps,
39
39
  alignItems = "center",
40
40
  justify = "center",
41
+ ariaLabel,
41
42
  ...props
42
43
  }, ref) => {
43
44
  const { global, components } = system.useNSUI();
@@ -56,6 +57,7 @@ var Button = React__default.default.forwardRef(
56
57
  const showPrefix = prefix || loading && spinnerPosition === "prefix";
57
58
  const showContent = children || loading && spinnerPosition === "content";
58
59
  const showSuffix = suffix || loading && spinnerPosition === "suffix";
60
+ const resolvedAriaLabel = ariaLabel === false ? void 0 : ariaLabel ?? (typeof children === "string" ? children : void 0);
59
61
  return /* @__PURE__ */ jsxRuntime.jsx(
60
62
  flex.Flex,
61
63
  {
@@ -67,6 +69,7 @@ var Button = React__default.default.forwardRef(
67
69
  disabled: isDisabled,
68
70
  "data-loading": loading,
69
71
  "data-disabled": isDisabled,
72
+ "aria-label": resolvedAriaLabel,
70
73
  onClick: handleClick,
71
74
  className: system.cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn),
72
75
  style: styles?.btn,
@@ -142,13 +145,15 @@ var ButtonGroup = React__default.default.forwardRef(
142
145
  style: styles?.root,
143
146
  children: items.map((item, index) => {
144
147
  if ("button" in item) {
148
+ const { children, ...buttonProps } = item.button;
145
149
  return /* @__PURE__ */ jsxRuntime.jsx(
146
150
  Button,
147
151
  {
148
152
  controlled: true,
149
- classNames: system.mergeCn(classNames?.button, item.button.classNames),
150
- styles: { ...styles?.button, ...item.button.styles },
151
- ...item.button
153
+ ...buttonProps,
154
+ classNames: system.mergeCn(classNames?.button, buttonProps.classNames),
155
+ styles: { ...styles?.button, ...buttonProps.styles },
156
+ children
152
157
  },
153
158
  index
154
159
  );
@@ -158,9 +163,9 @@ var ButtonGroup = React__default.default.forwardRef(
158
163
  IconButton,
159
164
  {
160
165
  controlled: true,
166
+ ...item.iconButton,
161
167
  className: system.cn(classNames?.iconButton, item.iconButton.className),
162
- style: { ...styles?.iconButton, ...item.iconButton.style },
163
- ...item.iconButton
168
+ style: { ...styles?.iconButton, ...item.iconButton.style }
164
169
  },
165
170
  index
166
171
  );
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useContext","useNSUI","useRipple","jsx","Spinner","Flex","cn","jsxs","Fragment","mergeCn"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\n\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import { Flex, FlexProps } from '@negative-space/flex'\nimport { useRipple } from '@negative-space/ripple'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n spinner?: string\n }\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n spinner?: React.CSSProperties\n }\n animation?: ClickableAnimation\n controlled?: boolean\n loading?: boolean\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n animation,\n onClick,\n loading = false,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = (animation ?? components.button.animation) !== 'ripple'\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || loading || (controlled ? groupDisabled : false)\n const resolvedSpinner = (\n <Spinner loading className={classNames?.spinner} style={styles?.spinner} {...spinnerProps} />\n )\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (loading && spinnerPosition === 'prefix')\n const showContent = children || (loading && spinnerPosition === 'content')\n const showSuffix = suffix || (loading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-loading={loading}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && loading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && loading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && loading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && loading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import { useRipple } from '@negative-space/ripple'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n animation?: ClickableAnimation\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, animation, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = (animation ?? components.iconButton.animation) !== 'ripple'\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { Button, type ButtonProps } from './Button'\nimport { ButtonContext } from './ButtonContext'\nimport { IconButton, type IconButtonProps } from './IconButton'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n return (\n <Button\n key={index}\n controlled\n classNames={mergeCn(classNames?.button, item.button.classNames)}\n styles={{ ...styles?.button, ...item.button.styles }}\n {...item.button}\n />\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n {...item.iconButton}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
1
+ {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useContext","useNSUI","useRipple","jsx","Spinner","Flex","cn","jsxs","Fragment","mergeCn"],"mappings":"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","file":"index.js","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\n\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import { Flex, FlexProps } from '@negative-space/flex'\nimport { useRipple } from '@negative-space/ripple'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\ntype ButtonAccessibility =\n | {\n children: React.ReactNode\n ariaLabel?: string | false\n }\n | {\n children?: never\n ariaLabel: string\n }\n\ninterface ButtonBaseProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style' | 'aria-label'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n spinner?: string\n }\n\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n spinner?: React.CSSProperties\n }\n\n animation?: ClickableAnimation\n controlled?: boolean\n loading?: boolean\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>\n}\n\nexport type ButtonProps = ButtonBaseProps & ButtonAccessibility\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n animation,\n onClick,\n loading = false,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ariaLabel,\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = (animation ?? components.button.animation) !== 'ripple'\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || loading || (controlled ? groupDisabled : false)\n\n const resolvedSpinner = (\n <Spinner loading className={classNames?.spinner} style={styles?.spinner} {...spinnerProps} />\n )\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n\n const isKeyboard = e.detail === 0\n\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (loading && spinnerPosition === 'prefix')\n const showContent = children || (loading && spinnerPosition === 'content')\n const showSuffix = suffix || (loading && spinnerPosition === 'suffix')\n\n const resolvedAriaLabel =\n ariaLabel === false\n ? undefined\n : (ariaLabel ?? (typeof children === 'string' ? children : undefined))\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-loading={loading}\n data-disabled={isDisabled}\n aria-label={resolvedAriaLabel}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && loading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && loading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && loading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && loading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import { useRipple } from '@negative-space/ripple'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n animation?: ClickableAnimation\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, animation, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = (animation ?? components.iconButton.animation) !== 'ripple'\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { Button, type ButtonProps } from './Button'\nimport { ButtonContext } from './ButtonContext'\nimport { IconButton, type IconButtonProps } from './IconButton'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n const { children, ...buttonProps } = item.button\n\n return (\n <Button\n key={index}\n controlled\n {...buttonProps}\n classNames={mergeCn(classNames?.button, buttonProps.classNames)}\n styles={{ ...styles?.button, ...buttonProps.styles }}\n >\n {children}\n </Button>\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n {...item.iconButton}\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
package/dist/index.mjs CHANGED
@@ -32,6 +32,7 @@ var Button = React.forwardRef(
32
32
  spinnerProps,
33
33
  alignItems = "center",
34
34
  justify = "center",
35
+ ariaLabel,
35
36
  ...props
36
37
  }, ref) => {
37
38
  const { global, components } = useNSUI();
@@ -50,6 +51,7 @@ var Button = React.forwardRef(
50
51
  const showPrefix = prefix || loading && spinnerPosition === "prefix";
51
52
  const showContent = children || loading && spinnerPosition === "content";
52
53
  const showSuffix = suffix || loading && spinnerPosition === "suffix";
54
+ const resolvedAriaLabel = ariaLabel === false ? void 0 : ariaLabel ?? (typeof children === "string" ? children : void 0);
53
55
  return /* @__PURE__ */ jsx(
54
56
  Flex,
55
57
  {
@@ -61,6 +63,7 @@ var Button = React.forwardRef(
61
63
  disabled: isDisabled,
62
64
  "data-loading": loading,
63
65
  "data-disabled": isDisabled,
66
+ "aria-label": resolvedAriaLabel,
64
67
  onClick: handleClick,
65
68
  className: cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn),
66
69
  style: styles?.btn,
@@ -136,13 +139,15 @@ var ButtonGroup = React.forwardRef(
136
139
  style: styles?.root,
137
140
  children: items.map((item, index) => {
138
141
  if ("button" in item) {
142
+ const { children, ...buttonProps } = item.button;
139
143
  return /* @__PURE__ */ jsx(
140
144
  Button,
141
145
  {
142
146
  controlled: true,
143
- classNames: mergeCn(classNames?.button, item.button.classNames),
144
- styles: { ...styles?.button, ...item.button.styles },
145
- ...item.button
147
+ ...buttonProps,
148
+ classNames: mergeCn(classNames?.button, buttonProps.classNames),
149
+ styles: { ...styles?.button, ...buttonProps.styles },
150
+ children
146
151
  },
147
152
  index
148
153
  );
@@ -152,9 +157,9 @@ var ButtonGroup = React.forwardRef(
152
157
  IconButton,
153
158
  {
154
159
  controlled: true,
160
+ ...item.iconButton,
155
161
  className: cn(classNames?.iconButton, item.iconButton.className),
156
- style: { ...styles?.iconButton, ...item.iconButton.style },
157
- ...item.iconButton
162
+ style: { ...styles?.iconButton, ...item.iconButton.style }
158
163
  },
159
164
  index
160
165
  );
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useNSUI","useRipple","jsx","cn","Flex"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\n\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import { Flex, FlexProps } from '@negative-space/flex'\nimport { useRipple } from '@negative-space/ripple'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface ButtonProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n spinner?: string\n }\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n spinner?: React.CSSProperties\n }\n animation?: ClickableAnimation\n controlled?: boolean\n loading?: boolean\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n animation,\n onClick,\n loading = false,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = (animation ?? components.button.animation) !== 'ripple'\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || loading || (controlled ? groupDisabled : false)\n const resolvedSpinner = (\n <Spinner loading className={classNames?.spinner} style={styles?.spinner} {...spinnerProps} />\n )\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (loading && spinnerPosition === 'prefix')\n const showContent = children || (loading && spinnerPosition === 'content')\n const showSuffix = suffix || (loading && spinnerPosition === 'suffix')\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-loading={loading}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && loading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && loading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && loading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && loading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import { useRipple } from '@negative-space/ripple'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n animation?: ClickableAnimation\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, animation, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = (animation ?? components.iconButton.animation) !== 'ripple'\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { Button, type ButtonProps } from './Button'\nimport { ButtonContext } from './ButtonContext'\nimport { IconButton, type IconButtonProps } from './IconButton'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n return (\n <Button\n key={index}\n controlled\n classNames={mergeCn(classNames?.button, item.button.classNames)}\n styles={{ ...styles?.button, ...item.button.styles }}\n {...item.button}\n />\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n {...item.iconButton}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
1
+ {"version":3,"sources":["../src/ButtonContext.ts","../src/useButtonContext.ts","../src/Button.tsx","../src/IconButton.tsx","../src/ButtonGroup.tsx"],"names":["React","useNSUI","useRipple","jsx","cn","Flex"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react'\n\nexport type ButtonContextValue = {\n disabled?: boolean\n}\n\nexport const ButtonContext = React.createContext<ButtonContextValue | null>(null)\n","import { useContext } from 'react'\n\nimport { ButtonContext, type ButtonContextValue } from './ButtonContext'\n\nexport const useButtonContextConditional = (\n controlled: boolean\n): ButtonContextValue | { disabled: false } => {\n const ctx = useContext(ButtonContext)\n\n if (controlled && !ctx) {\n throw new Error('Button components must be used within ButtonGroup')\n }\n\n return ctx ?? { disabled: false }\n}\n","import { Flex, FlexProps } from '@negative-space/flex'\nimport { useRipple } from '@negative-space/ripple'\nimport { Spinner, type SpinnerProps } from '@negative-space/spinner'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\ntype ButtonAccessibility =\n | {\n children: React.ReactNode\n ariaLabel?: string | false\n }\n | {\n children?: never\n ariaLabel: string\n }\n\ninterface ButtonBaseProps extends Omit<\n FlexProps<'button'>,\n 'as' | 'prefix' | 'className' | 'style' | 'aria-label'\n> {\n prefix?: React.ReactNode\n suffix?: React.ReactNode\n\n classNames?: {\n btn?: string\n prefix?: string\n content?: string\n suffix?: string\n spinner?: string\n }\n\n styles?: {\n btn?: React.CSSProperties\n prefix?: React.CSSProperties\n content?: React.CSSProperties\n suffix?: React.CSSProperties\n spinner?: React.CSSProperties\n }\n\n animation?: ClickableAnimation\n controlled?: boolean\n loading?: boolean\n spinnerPosition?: 'full' | 'prefix' | 'content' | 'suffix'\n spinnerProps?: Omit<SpinnerProps, 'loading' | 'className' | 'style'>\n}\n\nexport type ButtonProps = ButtonBaseProps & ButtonAccessibility\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n children,\n prefix,\n suffix,\n classNames,\n controlled,\n styles,\n disabled = false,\n animation,\n onClick,\n loading = false,\n spinnerPosition = 'full',\n spinnerProps,\n alignItems = 'center',\n justify = 'center',\n ariaLabel,\n ...props\n },\n ref\n ) => {\n const { global, components } = useNSUI()\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n\n const rippleDisabled = (animation ?? components.button.animation) !== 'ripple'\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const isDisabled = disabled || loading || (controlled ? groupDisabled : false)\n\n const resolvedSpinner = (\n <Spinner loading className={classNames?.spinner} style={styles?.spinner} {...spinnerProps} />\n )\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n\n const isKeyboard = e.detail === 0\n\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n const showPrefix = prefix || (loading && spinnerPosition === 'prefix')\n const showContent = children || (loading && spinnerPosition === 'content')\n const showSuffix = suffix || (loading && spinnerPosition === 'suffix')\n\n const resolvedAriaLabel =\n ariaLabel === false\n ? undefined\n : (ariaLabel ?? (typeof children === 'string' ? children : undefined))\n\n return (\n <Flex\n {...props}\n ref={ref}\n as=\"button\"\n alignItems={alignItems}\n justify={justify}\n disabled={isDisabled}\n data-loading={loading}\n data-disabled={isDisabled}\n aria-label={resolvedAriaLabel}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-btn ${global.prefixCls}-clickable`, classNames?.btn)}\n style={styles?.btn}\n >\n {spinnerPosition === 'full' && loading ? (\n resolvedSpinner\n ) : (\n <>\n {showPrefix && (\n <span\n className={cn(`${global.prefixCls}-btn-prefix`, classNames?.prefix)}\n style={styles?.prefix}\n >\n {spinnerPosition === 'prefix' && loading ? resolvedSpinner : prefix}\n </span>\n )}\n\n {showContent && (\n <span\n className={cn(`${global.prefixCls}-btn-content`, classNames?.content)}\n style={styles?.content}\n >\n {spinnerPosition === 'content' && loading ? resolvedSpinner : children}\n </span>\n )}\n\n {showSuffix && (\n <span\n className={cn(`${global.prefixCls}-btn-suffix`, classNames?.suffix)}\n style={styles?.suffix}\n >\n {spinnerPosition === 'suffix' && loading ? resolvedSpinner : suffix}\n </span>\n )}\n </>\n )}\n </Flex>\n )\n }\n)\n\nButton.displayName = 'Button'\n","import { useRipple } from '@negative-space/ripple'\nimport { type ClickableAnimation, cn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { useButtonContextConditional } from './useButtonContext'\n\nexport interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n controlled?: boolean\n animation?: ClickableAnimation\n}\n\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, controlled, style, disabled, animation, onClick, ...props }, ref) => {\n const { global, components } = useNSUI()\n const rippleDisabled = (animation ?? components.iconButton.animation) !== 'ripple'\n\n const context = useButtonContextConditional(!!controlled)\n const groupDisabled = context.disabled\n const isDisabled = disabled || (controlled ? groupDisabled : false)\n\n const { createRipple } = useRipple(`${global.prefixCls}-ripple`)\n\n const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {\n if (isDisabled) return\n const isKeyboard = e.detail === 0\n if (!rippleDisabled) createRipple(e, { centered: isKeyboard })\n\n onClick?.(e)\n }\n\n return (\n <button\n ref={ref}\n disabled={isDisabled}\n data-disabled={isDisabled}\n onClick={handleClick}\n className={cn(`${global.prefixCls}-icon-btn ${global.prefixCls}-clickable`, className)}\n style={style}\n {...props}\n />\n )\n }\n)\n\nIconButton.displayName = 'IconButton'\n","import { Flex, type FlexProps } from '@negative-space/flex'\nimport { cn, mergeCn, useNSUI } from '@negative-space/system'\nimport React from 'react'\n\nimport { Button, type ButtonProps } from './Button'\nimport { ButtonContext } from './ButtonContext'\nimport { IconButton, type IconButtonProps } from './IconButton'\n\nexport type ButtonComponent =\n | { button: Omit<ButtonProps, 'controlled'> }\n | { iconButton: Omit<IconButtonProps, 'controlled'> }\n\nexport interface ButtonGroupProps extends Omit<FlexProps, 'as' | 'className' | 'style'> {\n classNames?: {\n root?: string\n button?: {\n btn?: string\n content?: string\n prefix?: string\n suffix?: string\n }\n iconButton?: string\n }\n styles?: {\n root?: React.CSSProperties\n button?: {\n btn?: React.CSSProperties\n content?: React.CSSProperties\n prefix?: React.CSSProperties\n suffix?: React.CSSProperties\n }\n iconButton?: React.CSSProperties\n }\n disabled?: boolean\n items: ButtonComponent[]\n}\n\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ items, classNames, styles, disabled, ...props }, ref) => {\n const { global } = useNSUI()\n\n return (\n <ButtonContext.Provider value={{ disabled }}>\n <Flex\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-btn-group`, classNames?.root)}\n style={styles?.root}\n >\n {items.map((item, index) => {\n if ('button' in item) {\n const { children, ...buttonProps } = item.button\n\n return (\n <Button\n key={index}\n controlled\n {...buttonProps}\n classNames={mergeCn(classNames?.button, buttonProps.classNames)}\n styles={{ ...styles?.button, ...buttonProps.styles }}\n >\n {children}\n </Button>\n )\n }\n\n if ('iconButton' in item) {\n return (\n <IconButton\n key={index}\n controlled\n {...item.iconButton}\n className={cn(classNames?.iconButton, item.iconButton.className)}\n style={{ ...styles?.iconButton, ...item.iconButton.style }}\n />\n )\n }\n\n return null\n })}\n </Flex>\n </ButtonContext.Provider>\n )\n }\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@negative-space/button",
3
- "version": "2.5.0",
3
+ "version": "2.6.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },