@infonomic/uikit 5.36.0 → 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 +8 -1
  2. package/dist/components/button/combo-button.d.ts.map +1 -1
  3. package/dist/components/button/combo-button.js +8 -6
  4. package/package.json +1 -1
  5. package/src/components/button/combo-button.tsx +37 -20
  6. package/src/components/button/combo-buttons.stories.tsx +33 -1
package/dist/components/button/combo-button.d.ts CHANGED
@@ -6,6 +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;
12
+ children?: React.ReactNode;
13
+ align?: 'start' | 'center' | 'end';
14
+ dataSide?: 'top' | 'bottom' | 'left' | 'right';
15
+ sideOffset?: number;
9
16
  };
10
- export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, ...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;
11
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;CACzC,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,qDAKzB,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,14 +4,15 @@ 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, ...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
- children: "Combo Button"
15
+ children: children
15
16
  }),
16
17
  /*#__PURE__*/ jsxs(Dropdown.Root, {
17
18
  children: [
@@ -19,6 +20,7 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, ...rest })=>/*#__
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,12 +28,12 @@ const ComboButton = ({ options, onButtonClick, onOptionSelect, ...rest })=>/*#__
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
- align: "end",
33
- "data-side": "top",
34
- sideOffset: 5,
34
+ align: align,
35
+ "data-side": dataSide,
36
+ sideOffset: sideOffset,
35
37
  children: options.map((option)=>/*#__PURE__*/ jsx(Dropdown.Item, {
36
38
  onSelect: ()=>onOptionSelect?.(option.value),
37
39
  children: /*#__PURE__*/ jsx("div", {
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.0",
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,43 +9,60 @@ 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
15
+ children?: React.ReactNode
16
+ align?: 'start' | 'center' | 'end'
17
+ dataSide?: 'top' | 'bottom' | 'left' | 'right'
18
+ sideOffset?: number
12
19
  }
13
20
 
21
+
14
22
  export const ComboButton = ({
15
23
  options,
16
24
  onButtonClick,
17
25
  onOptionSelect,
26
+ disabled = false,
27
+ buttonDisabled = false,
28
+ optionsDisabled = false,
29
+ children,
30
+ align = 'end',
31
+ dataSide = 'top',
32
+ sideOffset = 5,
18
33
  ...rest
19
34
  }: ComboButtonProps) => {
20
35
  return (
21
36
  <div className={cx('combo-button-wrapper', styles['combo-button-wrapper'])}>
22
- <Button className={cx('combo-button-button', styles['combo-button-button'])} {...rest} onClick={onButtonClick}>
23
- Combo Button
37
+ <Button className={cx('combo-button-button', styles['combo-button-button'])} disabled={disabled || buttonDisabled} {...rest} onClick={onButtonClick}>
38
+ {children}
24
39
  </Button>
25
40
  <DropdownComponent.Root>
26
41
  <DropdownComponent.Trigger asChild>
27
- <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}>
28
43
  <ChevronDownIcon width="16px" height="16px" />
29
44
  </Button>
30
45
  </DropdownComponent.Trigger>
31
46
 
32
- <DropdownComponent.Portal>
33
- <DropdownComponent.Content
34
- className={cx('combo-button-options', styles['combo-button-options'])}
35
- align="end"
36
- data-side="top"
37
- sideOffset={5}
38
- >
39
- {options.map((option) => (
40
- <DropdownComponent.Item
41
- key={option.value}
42
- onSelect={() => onOptionSelect?.(option.value)}
43
- >
44
- <div className={cx('combo-button-options-item', styles['combo-button-options-item'])}>{option.label}</div>
45
- </DropdownComponent.Item>
46
- ))}
47
- </DropdownComponent.Content>
48
- </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
+ )}
49
66
  </DropdownComponent.Root>
50
67
  </div>
51
68
  )
package/src/components/button/combo-buttons.stories.tsx CHANGED
@@ -24,7 +24,39 @@ 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}>
58
+ Combo Button
59
+ </ComboButton>
28
60
  </div>
29
61
  </div>
30
62
  </div>