@infonomic/uikit 6.0.5 → 6.1.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 (6) hide show
  1. package/dist/components/inputs/select.d.ts +3 -2
  2. package/dist/components/inputs/select.d.ts.map +1 -1
  3. package/dist/components/inputs/select.js +10 -5
  4. package/package.json +1 -1
  5. package/src/components/inputs/select.stories.tsx +19 -35
  6. package/src/components/inputs/select.tsx +12 -4
package/dist/components/inputs/select.d.ts CHANGED
@@ -8,7 +8,7 @@ export interface SelectValue {
8
8
  prefix?: string;
9
9
  suffix?: string;
10
10
  }
11
- type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
11
+ type SelectProps = Omit<React.ComponentProps<typeof SelectPrimitive.Root>, 'items'> & {
12
12
  id?: string;
13
13
  intent?: Intent;
14
14
  variant?: Variant;
@@ -20,8 +20,9 @@ type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
20
20
  disabledValue?: string;
21
21
  ariaLabel?: string;
22
22
  helpText?: string;
23
+ items?: SelectValue[];
23
24
  };
24
- export declare function Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, ...rest }: SelectProps): React.JSX.Element;
25
+ export declare function Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, items, ...rest }: SelectProps): React.JSX.Element;
25
26
  export declare const SelectItem: {
26
27
  ({ ref: forwardedRef, children, className, ...props }: React.ComponentProps<typeof SelectPrimitive.Item> & {
27
28
  ref?: React.RefObject<HTMLDivElement>;
package/dist/components/inputs/select.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AASjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CjC;AAED,eAAO,MAAM,UAAU;2DAKpB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;QACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAeA,CAAA"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAA;AASjE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE/D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,KAAK,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,GAAG;IACpF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,cAAc,GAAG,QAAQ,CAAA;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,EAAE,CAAA;CACtB,CAAA;AAED,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,aAAa,EACb,MAAM,EACN,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiDjC;AAED,eAAO,MAAM,UAAU;2DAKpB,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;QACrD,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;KACtC;;CAeA,CAAA"}
package/dist/components/inputs/select.js CHANGED
@@ -8,11 +8,12 @@ import { ChevronUpIcon } from "../../icons/chevron-up-icon.js";
8
8
  import { Button } from "../button/button.js";
9
9
  import { HelpText } from "./help-text.js";
10
10
  import select_module from "./select.module.js";
11
- function select_Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, ...rest }) {
11
+ function select_Select({ id, children, placeholder, disabledValue, intent, variant, size, position, containerClassName, className, ariaLabel, helpText, items, ...rest }) {
12
12
  return /*#__PURE__*/ jsxs("div", {
13
13
  className: classnames('infonomic-select-container', containerClassName),
14
14
  children: [
15
15
  /*#__PURE__*/ jsxs(Select.Root, {
16
+ items: items,
16
17
  ...rest,
17
18
  children: [
18
19
  /*#__PURE__*/ jsxs(Select.Trigger, {
@@ -46,7 +47,11 @@ function select_Select({ id, children, placeholder, disabledValue, intent, varia
46
47
  className: classnames(select_module.popup, null != size && select_module[`popup-${size}`]),
47
48
  children: /*#__PURE__*/ jsx(Select.List, {
48
49
  className: select_module.list,
49
- children: children
50
+ children: children ?? items?.map((item)=>/*#__PURE__*/ jsx(SelectItem, {
51
+ value: item.value,
52
+ label: item.label,
53
+ children: item.label
54
+ }, item.value))
50
55
  })
51
56
  }),
52
57
  /*#__PURE__*/ jsx(Select.ScrollDownArrow, {
@@ -69,12 +74,12 @@ const SelectItem = ({ ref: forwardedRef, children, className, ...props })=>/*#__
69
74
  ...props,
70
75
  ref: forwardedRef,
71
76
  children: [
72
- /*#__PURE__*/ jsx(Select.ItemText, {
73
- children: children
74
- }),
75
77
  /*#__PURE__*/ jsx(Select.ItemIndicator, {
76
78
  className: classnames('infonomic-select-item-indicator', select_module["select-item-indicator"]),
77
79
  children: /*#__PURE__*/ jsx(CheckIcon, {})
80
+ }),
81
+ /*#__PURE__*/ jsx(Select.ItemText, {
82
+ children: children
78
83
  })
79
84
  ]
80
85
  });
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "6.0.5",
5
+ "version": "6.1.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/inputs/select.stories.tsx CHANGED
@@ -21,50 +21,34 @@ export const Default = (): React.JSX.Element => {
21
21
  return (
22
22
  <>
23
23
  <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
24
- <Select size="xl" placeholder="Select one..." helpText="Extra Large select.">
25
- {values.map((value) => (
26
- <SelectItem key={value.value} value={value.value}>
27
- {value.label}
28
- </SelectItem>
29
- ))}
30
- </Select>
24
+ <Select items={values} size="xl" placeholder="Select one..." helpText="Extra Large select." />
31
25
  </div>
32
26
  <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
33
- <Select size="lg" placeholder="Select one..." helpText="Large select.">
34
- {values.map((value) => (
35
- <SelectItem key={value.value} value={value.value}>
36
- {value.label}
37
- </SelectItem>
38
- ))}
39
- </Select>
27
+ <Select items={values} size="lg" placeholder="Select one..." helpText="Large select." />
40
28
  </div>
41
29
  <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
42
- <Select size="md" placeholder="Select one..." helpText="Medium select.">
43
- {values.map((value) => (
44
- <SelectItem key={value.value} value={value.value}>
45
- {value.label}
46
- </SelectItem>
47
- ))}
48
- </Select>
30
+ <Select items={values} size="md" placeholder="Select one..." helpText="Medium select." />
49
31
  </div>
50
32
  <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
51
- <Select size="sm" placeholder="Select one..." helpText="Small select.">
52
- {values.map((value) => (
53
- <SelectItem key={value.value} value={value.value}>
54
- {value.label}
55
- </SelectItem>
56
- ))}
57
- </Select>
33
+ <Select items={values} size="sm" placeholder="Select one..." helpText="Small select." />
58
34
  </div>
59
35
  <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
60
- <Select size="xs" placeholder="Select one..." helpText="Extra small select.">
61
- {values.map((value) => (
62
- <SelectItem key={value.value} value={value.value}>
63
- {value.label}
64
- </SelectItem>
65
- ))}
66
- </Select>
36
+ <Select items={values} size="xs" placeholder="Select one..." helpText="Extra small select." />
67
37
  </div>
68
38
  </>
69
39
  )
70
40
  }
41
+
42
+ export const CustomChildren = (): React.JSX.Element => {
43
+ return (
44
+ <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
45
+ <Select items={values} size="md" placeholder="Select one..." helpText="Custom children rendering.">
46
+ {values.map((value) => (
47
+ <SelectItem key={value.value} value={value.value} label={value.label}>
48
+ {value.prefix}{value.label}{value.suffix}
49
+ </SelectItem>
50
+ ))}
51
+ </Select>
52
+ </div>
53
+ )
54
+ }
package/src/components/inputs/select.tsx CHANGED
@@ -21,7 +21,7 @@ export interface SelectValue {
21
21
  suffix?: string
22
22
  }
23
23
 
24
- type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
24
+ type SelectProps = Omit<React.ComponentProps<typeof SelectPrimitive.Root>, 'items'> & {
25
25
  id?: string
26
26
  intent?: Intent
27
27
  variant?: Variant
@@ -33,6 +33,7 @@ type SelectProps = React.ComponentProps<typeof SelectPrimitive.Root> & {
33
33
  disabledValue?: string
34
34
  ariaLabel?: string
35
35
  helpText?: string
36
+ items?: SelectValue[]
36
37
  }
37
38
 
38
39
  export function Select({
@@ -48,11 +49,12 @@ export function Select({
48
49
  className,
49
50
  ariaLabel,
50
51
  helpText,
52
+ items,
51
53
  ...rest
52
54
  }: SelectProps): React.JSX.Element {
53
55
  return (
54
56
  <div className={cx('infonomic-select-container', containerClassName)}>
55
- <SelectPrimitive.Root {...rest}>
57
+ <SelectPrimitive.Root items={items} {...rest}>
56
58
  <SelectPrimitive.Trigger
57
59
  aria-label={ariaLabel ?? 'Select'}
58
60
  render={
@@ -70,6 +72,7 @@ export function Select({
70
72
  <ChevronDownIcon />
71
73
  </SelectPrimitive.Icon>
72
74
  </SelectPrimitive.Trigger>
75
+
73
76
  <SelectPrimitive.Portal>
74
77
  <SelectPrimitive.Positioner
75
78
  className={styles.positioner}
@@ -80,7 +83,11 @@ export function Select({
80
83
  </SelectPrimitive.ScrollUpArrow>
81
84
  <SelectPrimitive.Popup className={cx(styles.popup, size != null && styles[`popup-${size}`])}>
82
85
  <SelectPrimitive.List className={styles.list}>
83
- {children}
86
+ {children ?? items?.map((item) => (
87
+ <SelectItem key={item.value} value={item.value} label={item.label}>
88
+ {item.label}
89
+ </SelectItem>
90
+ ))}
84
91
  </SelectPrimitive.List>
85
92
  </SelectPrimitive.Popup>
86
93
  <SelectPrimitive.ScrollDownArrow className={styles['scroll-arrow']}>
@@ -88,6 +95,7 @@ export function Select({
88
95
  </SelectPrimitive.ScrollDownArrow>
89
96
  </SelectPrimitive.Positioner>
90
97
  </SelectPrimitive.Portal>
98
+
91
99
  </SelectPrimitive.Root>
92
100
  {helpText != null && helpText?.length > 0 && <HelpText text={helpText} />}
93
101
  </div>
@@ -108,12 +116,12 @@ export const SelectItem = ({
108
116
  {...props}
109
117
  ref={forwardedRef}
110
118
  >
111
- <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
112
119
  <SelectPrimitive.ItemIndicator
113
120
  className={cx('infonomic-select-item-indicator', styles['select-item-indicator'])}
114
121
  >
115
122
  <CheckIcon />
116
123
  </SelectPrimitive.ItemIndicator>
124
+ <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
117
125
  </SelectPrimitive.Item>
118
126
  )
119
127
  }