@infonomic/uikit 5.36.1 → 5.36.2

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 (6) hide show
  1. package/dist/components/button/combo-button.d.ts +4 -1
  2. package/dist/components/button/combo-button.d.ts.map +1 -1
  3. package/dist/components/button/combo-button.js +4 -2
  4. package/package.json +1 -1
  5. package/src/components/button/combo-button.tsx +27 -19
  6. package/src/components/button/combo-buttons.stories.tsx +31 -1
package/dist/components/button/combo-button.d.ts CHANGED
@@ -6,10 +6,13 @@ 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;
13
16
  };
14
- export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, children, align, dataSide, sideOffset, ...rest }: ComboButtonProps) => import("react").JSX.Element;
17
+ export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, disabled, buttonDisabled, optionsDisabled, children, align, dataSide, sideOffset, ...rest }: ComboButtonProps) => import("react").JSX.Element;
15
18
  //# 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,CAAA;CACpB,CAAA;AAGD,eAAO,MAAM,WAAW,GAAI,uIAYzB,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", {
7
+ const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, ...rest })=>/*#__PURE__*/ jsxs("div", {
8
8
  className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"]),
9
9
  children: [
10
10
  /*#__PURE__*/ jsx(Button, {
11
11
  className: classnames('combo-button-button', combo_button_module["combo-button-button"]),
12
+ disabled: disabled || buttonDisabled,
12
13
  ...rest,
13
14
  onClick: onButtonClick,
14
15
  children: children
@@ -19,6 +20,7 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, children, align =
19
20
  asChild: true,
20
21
  children: /*#__PURE__*/ jsx(Button, {
21
22
  className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"]),
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/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.36.2",
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.tsx CHANGED
@@ -9,6 +9,9 @@ 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'
@@ -20,6 +23,9 @@ export const ComboButton = ({
20
23
  options,
21
24
  onButtonClick,
22
25
  onOptionSelect,
26
+ disabled = false,
27
+ buttonDisabled = false,
28
+ optionsDisabled = false,
23
29
  children,
24
30
  align = 'end',
25
31
  dataSide = 'top',
@@ -28,33 +34,35 @@ export const ComboButton = ({
28
34
  }: ComboButtonProps) => {
29
35
  return (
30
36
  <div className={cx('combo-button-wrapper', styles['combo-button-wrapper'])}>
31
- <Button className={cx('combo-button-button', styles['combo-button-button'])} {...rest} onClick={onButtonClick}>
37
+ <Button className={cx('combo-button-button', styles['combo-button-button'])} disabled={disabled || buttonDisabled} {...rest} onClick={onButtonClick}>
32
38
  {children}
33
39
  </Button>
34
40
  <DropdownComponent.Root>
35
41
  <DropdownComponent.Trigger asChild>
36
- <Button className={cx('combo-button-trigger', styles['combo-button-trigger'])} {...rest}>
42
+ <Button className={cx('combo-button-trigger', styles['combo-button-trigger'])} disabled={disabled || optionsDisabled} {...rest}>
37
43
  <ChevronDownIcon width="16px" height="16px" />
38
44
  </Button>
39
45
  </DropdownComponent.Trigger>
40
46
 
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>
47
+ {options.length > 0 && (
48
+ <DropdownComponent.Portal>
49
+ <DropdownComponent.Content
50
+ className={cx('combo-button-options', styles['combo-button-options'])}
51
+ align={align}
52
+ data-side={dataSide}
53
+ sideOffset={sideOffset}
54
+ >
55
+ {options.map((option) => (
56
+ <DropdownComponent.Item
57
+ key={option.value}
58
+ onSelect={() => onOptionSelect?.(option.value)}
59
+ >
60
+ <div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
61
+ </DropdownComponent.Item>
62
+ ))}
63
+ </DropdownComponent.Content>
64
+ </DropdownComponent.Portal>
65
+ )}
58
66
  </DropdownComponent.Root>
59
67
  </div>
60
68
  )
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>