@infonomic/uikit 5.36.1 → 5.37.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 (9) hide show
  1. package/dist/components/button/combo-button.d.ts +7 -1
  2. package/dist/components/button/combo-button.d.ts.map +1 -1
  3. package/dist/components/button/combo-button.js +7 -5
  4. package/dist/components/button/combo-button.module.css +1 -1
  5. package/dist/components/button/combo-button_module.css +1 -1
  6. package/package.json +1 -1
  7. package/src/components/button/combo-button.module.css +1 -1
  8. package/src/components/button/combo-button.tsx +35 -21
  9. package/src/components/button/combo-buttons.stories.tsx +31 -1
package/dist/components/button/combo-button.d.ts CHANGED
@@ -6,10 +6,16 @@ export type ComboButtonProps = ButtonProps & {
6
6
  }[];
7
7
  onButtonClick?: () => void;
8
8
  onOptionSelect?: (value: string) => void;
9
+ disabled?: boolean;
10
+ buttonDisabled?: boolean;
11
+ optionsDisabled?: boolean;
9
12
  children?: React.ReactNode;
10
13
  align?: 'start' | 'center' | 'end';
11
14
  dataSide?: 'top' | 'bottom' | 'left' | 'right';
12
15
  sideOffset?: number;
16
+ className?: string;
17
+ buttonClassName?: string;
18
+ triggerClassName?: string;
13
19
  };
14
- export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, children, align, dataSide, sideOffset, ...rest }: ComboButtonProps) => import("react").JSX.Element;
20
+ export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, disabled, buttonDisabled, optionsDisabled, children, align, dataSide, sideOffset, className, buttonClassName, triggerClassName, ...rest }: ComboButtonProps) => import("react").JSX.Element;
15
21
  //# sourceMappingURL=combo-button.d.ts.map
package/dist/components/button/combo-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAGD,eAAO,MAAM,WAAW,GAAI,4FASzB,gBAAgB,gCAiClB,CAAA"}
1
+ {"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAGD,eAAO,MAAM,WAAW,GAAI,qLAezB,gBAAgB,gCAmClB,CAAA"}
package/dist/components/button/combo-button.js CHANGED
@@ -4,11 +4,12 @@ import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
4
4
  import { Dropdown } from "../dropdown/dropdown.js";
5
5
  import { Button } from "./button.js";
6
6
  import combo_button_module from "./combo-button.module.js";
7
- const ComboButton = ({ options, onButtonClick, onOptionSelect, children, align = 'end', dataSide = 'top', sideOffset = 5, ...rest })=>/*#__PURE__*/ jsxs("div", {
8
- className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"]),
7
+ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, ...rest })=>/*#__PURE__*/ jsxs("div", {
8
+ className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
9
9
  children: [
10
10
  /*#__PURE__*/ jsx(Button, {
11
- className: classnames('combo-button-button', combo_button_module["combo-button-button"]),
11
+ className: classnames('combo-button-button', combo_button_module["combo-button-button"], buttonClassName),
12
+ disabled: disabled || buttonDisabled,
12
13
  ...rest,
13
14
  onClick: onButtonClick,
14
15
  children: children
@@ -18,7 +19,8 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, children, align =
18
19
  /*#__PURE__*/ jsx(Dropdown.Trigger, {
19
20
  asChild: true,
20
21
  children: /*#__PURE__*/ jsx(Button, {
21
- className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"]),
22
+ className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
23
+ disabled: disabled || optionsDisabled,
22
24
  ...rest,
23
25
  children: /*#__PURE__*/ jsx(ChevronDownIcon, {
24
26
  width: "16px",
@@ -26,7 +28,7 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, children, align =
26
28
  })
27
29
  })
28
30
  }),
29
- /*#__PURE__*/ jsx(Dropdown.Portal, {
31
+ options.length > 0 && /*#__PURE__*/ jsx(Dropdown.Portal, {
30
32
  children: /*#__PURE__*/ jsx(Dropdown.Content, {
31
33
  className: classnames('combo-button-options', combo_button_module["combo-button-options"]),
32
34
  align: align,
package/dist/components/button/combo-button.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  :global(.infonomic-combo-button-wrapper) {
7
7
  display: flex;
8
8
  align-items: center;
9
- gap: 0.1rem;
9
+ gap: 0.075rem;
10
10
  }
11
11
 
12
12
  .combo-button-button,
package/dist/components/button/combo-button_module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  @layer infonomic-components {
4
4
  :is(.combo-button-wrapper-nRtH6j, .infonomic-combo-button-wrapper) {
5
5
  align-items: center;
6
- gap: .1rem;
6
+ gap: .075rem;
7
7
  display: flex;
8
8
  }
9
9
 
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "5.36.1",
5
+ "version": "5.37.0",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/components/button/combo-button.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  :global(.infonomic-combo-button-wrapper) {
7
7
  display: flex;
8
8
  align-items: center;
9
- gap: 0.1rem;
9
+ gap: 0.075rem;
10
10
  }
11
11
 
12
12
  .combo-button-button,
package/src/components/button/combo-button.tsx CHANGED
@@ -9,10 +9,16 @@ export type ComboButtonProps = ButtonProps & {
9
9
  options: { label: string; value: string }[]
10
10
  onButtonClick?: () => void
11
11
  onOptionSelect?: (value: string) => void
12
+ disabled?: boolean
13
+ buttonDisabled?: boolean
14
+ optionsDisabled?: boolean
12
15
  children?: React.ReactNode
13
16
  align?: 'start' | 'center' | 'end'
14
17
  dataSide?: 'top' | 'bottom' | 'left' | 'right'
15
- sideOffset?: number
18
+ sideOffset?: number,
19
+ className?: string
20
+ buttonClassName?: string
21
+ triggerClassName?: string
16
22
  }
17
23
 
18
24
 
@@ -20,41 +26,49 @@ export const ComboButton = ({
20
26
  options,
21
27
  onButtonClick,
22
28
  onOptionSelect,
29
+ disabled = false,
30
+ buttonDisabled = false,
31
+ optionsDisabled = false,
23
32
  children,
24
33
  align = 'end',
25
34
  dataSide = 'top',
26
35
  sideOffset = 5,
36
+ className,
37
+ buttonClassName,
38
+ triggerClassName,
27
39
  ...rest
28
40
  }: ComboButtonProps) => {
29
41
  return (
30
- <div className={cx('combo-button-wrapper', styles['combo-button-wrapper'])}>
31
- <Button className={cx('combo-button-button', styles['combo-button-button'])} {...rest} onClick={onButtonClick}>
42
+ <div className={cx('combo-button-wrapper', styles['combo-button-wrapper'], className)}>
43
+ <Button className={cx('combo-button-button', styles['combo-button-button'], buttonClassName)} disabled={disabled || buttonDisabled} {...rest} onClick={onButtonClick}>
32
44
  {children}
33
45
  </Button>
34
46
  <DropdownComponent.Root>
35
47
  <DropdownComponent.Trigger asChild>
36
- <Button className={cx('combo-button-trigger', styles['combo-button-trigger'])} {...rest}>
48
+ <Button className={cx('combo-button-trigger', styles['combo-button-trigger'], triggerClassName)} disabled={disabled || optionsDisabled} {...rest}>
37
49
  <ChevronDownIcon width="16px" height="16px" />
38
50
  </Button>
39
51
  </DropdownComponent.Trigger>
40
52
 
41
- <DropdownComponent.Portal>
42
- <DropdownComponent.Content
43
- className={cx('combo-button-options', styles['combo-button-options'])}
44
- align={align}
45
- data-side={dataSide}
46
- sideOffset={sideOffset}
47
- >
48
- {options.map((option) => (
49
- <DropdownComponent.Item
50
- key={option.value}
51
- onSelect={() => onOptionSelect?.(option.value)}
52
- >
53
- <div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
54
- </DropdownComponent.Item>
55
- ))}
56
- </DropdownComponent.Content>
57
- </DropdownComponent.Portal>
53
+ {options.length > 0 && (
54
+ <DropdownComponent.Portal>
55
+ <DropdownComponent.Content
56
+ className={cx('combo-button-options', styles['combo-button-options'])}
57
+ align={align}
58
+ data-side={dataSide}
59
+ sideOffset={sideOffset}
60
+ >
61
+ {options.map((option) => (
62
+ <DropdownComponent.Item
63
+ key={option.value}
64
+ onSelect={() => onOptionSelect?.(option.value)}
65
+ >
66
+ <div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
67
+ </DropdownComponent.Item>
68
+ ))}
69
+ </DropdownComponent.Content>
70
+ </DropdownComponent.Portal>
71
+ )}
58
72
  </DropdownComponent.Root>
59
73
  </div>
60
74
  )
package/src/components/button/combo-buttons.stories.tsx CHANGED
@@ -24,7 +24,37 @@ const ComboButtonDemo = (): React.JSX.Element => {
24
24
  <div className="ml-12 mb-6">
25
25
  <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Combo Button</h2>
26
26
  <div className="flex items-center gap-4 mb-6">
27
- <ComboButton size="sm" options={options} onButtonClick={handleButtonClick} onOptionSelect={handleOptionSelect} >
27
+ <ComboButton
28
+ size="sm"
29
+ options={options}
30
+ onButtonClick={handleButtonClick}
31
+ onOptionSelect={handleOptionSelect} >
32
+ Combo Button
33
+ </ComboButton>
34
+ </div>
35
+ </div>
36
+ <div className="ml-12 mb-6">
37
+ <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>No Options Combo Button</h2>
38
+ <div className="flex items-center gap-4 mb-6">
39
+ <ComboButton
40
+ size="sm"
41
+ options={[]}
42
+ onButtonClick={handleButtonClick}
43
+ onOptionSelect={handleOptionSelect} >
44
+ Combo Button
45
+ </ComboButton>
46
+ </div>
47
+ </div>
48
+
49
+ <div className="ml-12 mb-6">
50
+ <h2 style={{ fontSize: '1.2rem', margin: '1rem 0' }}>Disabled Combo Button</h2>
51
+ <div className="flex items-center gap-4 mb-6">
52
+ <ComboButton
53
+ size="sm"
54
+ options={options}
55
+ onButtonClick={handleButtonClick}
56
+ onOptionSelect={handleOptionSelect}
57
+ disabled={true}>
28
58
  Combo Button
29
59
  </ComboButton>
30
60
  </div>