@veracity/vui 1.3.1-rc.0 → 1.4.0

package/dist/cjs/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuDxC;yBAvDe,MAAM;;;;;;;;;AA8DtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAoDxC;yBApDe,MAAM;;;;;;;;;AA2DtB,eAAe,MAAM,CAAA"}

package/dist/cjs/select/select.js

@@ -30,8 +30,9 @@ const useSelect_1 = __importDefault(require("./useSelect"));
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 function Select(props) {
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "name", "onChange", "options", "placeholder", "readOnly", "size", "value", "variant"]);
-    const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options });
+    var _a;
+    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "isInvalid", "isMultiple", "name", "onChange", "options", "placeholder", "readOnly", "selectButton", "size", "value", "variant"]);
+    const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options, children });
     if (utils_1.__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
     }
@@ -45,10 +46,10 @@ function Select(props) {
         size,
         variant }, selectProps);
     return (react_1.default.createElement(context_1.SelectProvider, { value: context },
-        react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest), children !== null && children !== void 0 ? children : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(selectButton_1.default, null),
-            react_1.default.createElement(selectContent_1.default, null,
-                react_1.default.createElement(selectGroup_1.default, null, options === null || options === void 0 ? void 0 : options.map(option => (react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value }, option)))))))))));
+        react_1.default.createElement(popover_1.Popover, Object.assign({ matchWidth: true }, rest),
+            react_1.default.createElement(react_1.default.Fragment, null, selectButton !== null && selectButton !== void 0 ? selectButton : react_1.default.createElement(selectButton_1.default, null),
+                react_1.default.createElement(selectContent_1.default, null,
+                    react_1.default.createElement(selectGroup_1.default, null, children !== null && children !== void 0 ? children : (_a = options === null || options === void 0 ? void 0 : options.map) === null || _a === void 0 ? void 0 : _a.call(options, option => react_1.default.createElement(selectOption_1.default, Object.assign({ key: option.value }, option)))))))));
 }
 exports.Select = Select;
 Select.Button = selectButton_1.default;

package/dist/cjs/select/select.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { ListItemProps, ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
@@ -16,11 +17,13 @@ export declare type SelectProps = ThemingProps<'Select'> & PopoverProps & UseSel
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string;
     /** Data prop to display an array of options in the popover. */
-    options: SelectOptionData[];
+    options?: SelectOptionData[];
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string;
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean;
+    /** Custom select button slot. */
+    selectButton?: ReactNode;
 };
 export declare type SelectOptionData = {
     /** Option is displayed as disabled. */

package/dist/cjs/select/select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}

package/dist/cjs/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBASjB,WAAW;;;EAehD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBAiBjB,WAAW;;;EAiBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/cjs/select/useSelect.js

@@ -8,11 +8,20 @@ const getValueText = (value, options) => {
 };
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 function useSelect(props) {
-    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options } = props;
+    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props;
     // Not using useControlled here, because we need custom value setter when uncontrolled
     const [stateValue, setStateValue] = (0, react_1.useState)(defaultValue);
     const isControlled = valueProp !== undefined;
     const value = isControlled ? valueProp : stateValue;
+    // Iterating over the children to dynamically obtain the list of available options
+    const dynamicOptions = [];
+    react_1.Children.forEach(children, element => {
+        if (!(0, react_1.isValidElement)(element))
+            return;
+        const option = element.props;
+        if (option.text && option.value)
+            dynamicOptions.push(option);
+    });
     /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
     const onChange = (0, utils_1.useCallbackRef)((e) => {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
@@ -21,9 +30,9 @@ function useSelect(props) {
     });
     const valueText = isMultiple && Array.isArray(value)
         ? value[0]
-            ? `${getValueText(value[0], options)}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+            ? `${getValueText(value[0], [...options, ...dynamicOptions])}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
             : undefined
-        : getValueText(value, options);
+        : getValueText(value, [...options, ...dynamicOptions]);
     return { onChange, value, valueText };
 }
 exports.default = useSelect;

package/dist/cjs/select/useSelect.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ChangeEvent } from '../utils';
 import { SelectOptionData, SelectValue } from './select.types';
 export declare type UseSelectProps = {
@@ -8,7 +9,9 @@ export declare type UseSelectProps = {
     /** Allows choosing multiple values. Popover won't close automatically on item click. */
     isMultiple?: boolean;
     /** List of all available options */
-    options: SelectOptionData[];
+    options?: SelectOptionData[];
+    /** Select children elements for dynamic handling */
+    children?: ReactNode;
     /**
      * Callback triggered when an option is selected.
      *

package/dist/cjs/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}
+{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}

package/dist/esm/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAuDxC;yBAvDe,MAAM;;;;;;;;;AA8DtB,eAAe,MAAM,CAAA"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAoDxC;yBApDe,MAAM;;;;;;;;;AA2DtB,eAAe,MAAM,CAAA"}

package/dist/esm/select/select.js

@@ -13,8 +13,8 @@ import useSelect from './useSelect';
  * Supports single select and multi select, as well as controlled and uncontrolled modes.
  */
 export function Select(props) {
-    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, size, value, variant, ...rest } = props;
-    const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options });
+    const { children, defaultValue, disabled, isInvalid, isMultiple, name, onChange, options, placeholder = 'Please select', readOnly, selectButton, size, value, variant, ...rest } = props;
+    const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children });
     if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
         console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
     }
@@ -31,10 +31,11 @@ export function Select(props) {
         ...selectProps
     };
     return (React.createElement(SelectProvider, { value: context },
-        React.createElement(Popover, { matchWidth: true, ...rest }, children ?? (React.createElement(React.Fragment, null,
-            React.createElement(SelectButton, null),
-            React.createElement(SelectContent, null,
-                React.createElement(SelectGroup, null, options?.map(option => (React.createElement(SelectOption, { key: option.value, ...option }))))))))));
+        React.createElement(Popover, { matchWidth: true, ...rest },
+            React.createElement(React.Fragment, null,
+                selectButton ?? React.createElement(SelectButton, null),
+                React.createElement(SelectContent, null,
+                    React.createElement(SelectGroup, null, children ?? options?.map?.(option => React.createElement(SelectOption, { key: option.value, ...option }))))))));
 }
 Select.Button = SelectButton;
 Select.Content = SelectContent;

package/dist/esm/select/select.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button';
 import { ListItemProps, ListProps } from '../list';
 import { PopoverContentProps, PopoverProps } from '../popover';
@@ -16,11 +17,13 @@ export declare type SelectProps = ThemingProps<'Select'> & PopoverProps & UseSel
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string;
     /** Data prop to display an array of options in the popover. */
-    options: SelectOptionData[];
+    options?: SelectOptionData[];
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string;
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean;
+    /** Custom select button slot. */
+    selectButton?: ReactNode;
 };
 export declare type SelectOptionData = {
     /** Option is displayed as disabled. */

package/dist/esm/select/select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}
+{"version":3,"file":"select.types.d.ts","sourceRoot":"","sources":["../../../src/select/select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,oBAAY,iBAAiB,GAAG,WAAW,CAAA;AAE3C,oBAAY,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,oBAAY,aAAa,GAAG,IAAI,CAC9B,WAAW,EACX,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAC/G,GACC,mBAAmB,CAAA;AAErB,oBAAY,gBAAgB,GAAG,SAAS,CAAA;AAExC,oBAAY,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,GAC9C,YAAY,GACZ,cAAc,GAAG;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+DAA+D;IAC/D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAEH,oBAAY,gBAAgB,GAAG;IAC7B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,KAAK,EAAE,WAAW,CAAA;CACnB,CAAA;AAED,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB,CAAA;AAED,oBAAY,WAAW,GAAG,MAAM,GAAG,MAAM,CAAA"}

package/dist/esm/select/useSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBASjB,WAAW;;;EAehD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}
+{"version":3,"file":"useSelect.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,UAAU,CAAA;AAClE,OAAO,EAAoB,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAQlD,wFAAwF;AACxF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc;kBAiBjB,WAAW;;;EAiBhD;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/esm/select/useSelect.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Children, isValidElement, useState } from 'react';
 import { toggleItem, useCallbackRef } from '../utils';
 const getValueText = (value, options) => {
     const option = options?.find((o) => o?.value === value);
@@ -6,11 +6,20 @@ const getValueText = (value, options) => {
 };
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props) {
-    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options } = props;
+    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props;
     // Not using useControlled here, because we need custom value setter when uncontrolled
     const [stateValue, setStateValue] = useState(defaultValue);
     const isControlled = valueProp !== undefined;
     const value = isControlled ? valueProp : stateValue;
+    // Iterating over the children to dynamically obtain the list of available options
+    const dynamicOptions = [];
+    Children.forEach(children, element => {
+        if (!isValidElement(element))
+            return;
+        const option = element.props;
+        if (option.text && option.value)
+            dynamicOptions.push(option);
+    });
     /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
     const onChange = useCallbackRef((e) => {
         onChangeProp?.(e);
@@ -19,8 +28,8 @@ export default function useSelect(props) {
     });
     const valueText = isMultiple && Array.isArray(value)
         ? value[0]
-            ? `${getValueText(value[0], options)}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+            ? `${getValueText(value[0], [...options, ...dynamicOptions])}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
             : undefined
-        : getValueText(value, options);
+        : getValueText(value, [...options, ...dynamicOptions]);
     return { onChange, value, valueText };
 }

package/dist/esm/select/useSelect.types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ChangeEvent } from '../utils';
 import { SelectOptionData, SelectValue } from './select.types';
 export declare type UseSelectProps = {
@@ -8,7 +9,9 @@ export declare type UseSelectProps = {
     /** Allows choosing multiple values. Popover won't close automatically on item click. */
     isMultiple?: boolean;
     /** List of all available options */
-    options: SelectOptionData[];
+    options?: SelectOptionData[];
+    /** Select children elements for dynamic handling */
+    children?: ReactNode;
     /**
      * Callback triggered when an option is selected.
      *

package/dist/esm/select/useSelect.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}
+{"version":3,"file":"useSelect.types.d.ts","sourceRoot":"","sources":["../../../src/select/useSelect.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE9D,oBAAY,cAAc,GAAG;IAC3B,mDAAmD;IACnD,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IACnC,mDAAmD;IACnD,YAAY,CAAC,EAAE,WAAW,GAAG,WAAW,EAAE,CAAA;IAC1C,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "1.3.1-rc.0",
+  "version": "1.4.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/select/select.tsx

@@ -27,13 +27,14 @@ export function Select(props: SelectProps) {
     options,
     placeholder = 'Please select',
     readOnly,
+    selectButton,
     size,
     value,
     variant,
     ...rest
   } = props
 
-  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options })
+  const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, children })
 
   if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
@@ -55,18 +56,14 @@ export function Select(props: SelectProps) {
   return (
     <SelectProvider value={context}>
       <Popover matchWidth {...rest}>
-        {children ?? (
-          <>
-            <SelectButton />
-            <SelectContent>
-              <SelectGroup>
-                {options?.map(option => (
-                  <SelectOption key={option.value} {...option} />
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </>
-        )}
+        <>
+          {selectButton ?? <SelectButton />}
+          <SelectContent>
+            <SelectGroup>
+              {children ?? options?.map?.(option => <SelectOption key={option.value} {...option} />)}
+            </SelectGroup>
+          </SelectContent>
+        </>
       </Popover>
     </SelectProvider>
   )

package/src/select/select.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { ButtonProps } from '../button'
 import { ListItemProps, ListProps } from '../list'
 import { PopoverContentProps, PopoverProps } from '../popover'
@@ -27,11 +29,13 @@ export type SelectProps = ThemingProps<'Select'> &
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string
     /** Data prop to display an array of options in the popover. */
-    options: SelectOptionData[]
+    options?: SelectOptionData[]
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string
     /** Select cannot be opened and is styled accordingly. */
     readOnly?: boolean
+    /** Custom select button slot. */
+    selectButton?: ReactNode
   }
 
 export type SelectOptionData = {

package/src/select/useSelect.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { Children, isValidElement, useState } from 'react'
 
 import { ChangeEvent, toggleItem, useCallbackRef } from '../utils'
 import { SelectOptionData, SelectValue } from './select.types'
@@ -12,13 +12,21 @@ const getValueText = (value: SelectValue, options: SelectOptionData[]) => {
 
 /** Handles controlled/uncontrolled value state. Supports single and multiple values. */
 export default function useSelect(props: UseSelectProps) {
-  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options } = props
+  const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], children } = props
 
   // Not using useControlled here, because we need custom value setter when uncontrolled
   const [stateValue, setStateValue] = useState(defaultValue)
   const isControlled = valueProp !== undefined
   const value = isControlled ? valueProp : stateValue
 
+  // Iterating over the children to dynamically obtain the list of available options
+  const dynamicOptions: SelectOptionData[] = []
+  Children.forEach(children, element => {
+    if (!isValidElement(element)) return
+    const option: SelectOptionData = element.props as SelectOptionData
+    if (option.text && option.value) dynamicOptions.push(option)
+  })
+
   /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
   const onChange = useCallbackRef((e: ChangeEvent) => {
     onChangeProp?.(e)
@@ -30,9 +38,11 @@ export default function useSelect(props: UseSelectProps) {
   const valueText =
     isMultiple && Array.isArray(value)
       ? value[0]
-        ? `${getValueText(value[0], options)}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
+        ? `${getValueText(value[0], [...options, ...dynamicOptions])}${
+            value.length > 1 ? ` (+${value.length - 1})` : ''
+          }`
         : undefined
-      : getValueText(value as SelectValue, options)
+      : getValueText(value as SelectValue, [...options, ...dynamicOptions])
 
   return { onChange, value, valueText }
 }

package/src/select/useSelect.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { ChangeEvent } from '../utils'
 import { SelectOptionData, SelectValue } from './select.types'
 
@@ -9,7 +11,9 @@ export type UseSelectProps = {
   /** Allows choosing multiple values. Popover won't close automatically on item click. */
   isMultiple?: boolean
   /** List of all available options */
-  options: SelectOptionData[]
+  options?: SelectOptionData[]
+  /** Select children elements for dynamic handling */
+  children?: ReactNode
   /**
    * Callback triggered when an option is selected.
    *