fix: Select mutations and ui-kit alerts

packages/fuselage-ui-kit/.eslintrc.js

@@ -22,6 +22,15 @@ module.exports = {
     'react/jsx-fragments': ['error', 'syntax'],
   },
   settings: {
+    'import/resolver': {
+      node: {
+        extensions: [
+          '.js',
+          '.ts',
+          '.tsx'
+        ],
+      },
+    },
     react: {
       version: 'detect',
     },
@@ -30,3 +39,4 @@ module.exports = {
     'jest': true,
   },
 };
+

packages/fuselage-ui-kit/package.json

@@ -28,16 +28,17 @@
     "build": "run-p build:prod build:dev"
   },
   "peerDependencies": {
-    "@rocket.chat/fuselage": "^0.6.1",
-    "@rocket.chat/fuselage-hooks": "^0.6.1",
-    "@rocket.chat/icons": "^0.6.1",
+    "@rocket.chat/fuselage": "^0.13.0",
+    "@rocket.chat/fuselage-hooks": "^0.13.0",
+    "@rocket.chat/icons": "^0.13.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
   "dependencies": {
     "@rocket.chat/ui-kit": "^0.13.0"
   },
   "devDependencies": {
+    "@rocket.chat/apps-engine": "1.16.0-alpha.3466",
     "@babel/core": "^7.7.4",
     "@babel/plugin-transform-runtime": "^7.9.0",
     "@babel/preset-env": "^7.4.5",
@@ -59,7 +60,11 @@
     "@storybook/theming": "^5.3.17",
     "babel-loader": "^8.0.6",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "compression-webpack-plugin": "^3.0.0",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.8.3",
+    "webpack-plugin-replace": "^1.2.0"
   },
   "publishConfig": {
     "access": "public"

packages/fuselage-ui-kit/src/Actions.js

@@ -35,14 +35,10 @@ export const Actions = ({ blockId, appId, elements, parser }) => {
 
   return (
     <Block>
-      <Margins all='neg-x8'>
-        <Flex.Container wrap='wrap'>
-          <Box>
-            {renderedElements}
-            {showMoreVisible && (<Flex.Item><Button onClick={handleShowMoreClick}>Show more...</Button></Flex.Item>)}
-          </Box>
-        </Flex.Container>
-      </Margins>
+      <Box display='flex' flexWrap='wrap' m='neg-x8'>
+        {renderedElements}
+        {showMoreVisible && (<Button onClick={handleShowMoreClick}>Show more...</Button>)}
+      </Box>
     </Block>
   );
 };

packages/fuselage-ui-kit/src/Image.js

@@ -4,7 +4,6 @@ import React, {
 } from 'react';
 import {
   Box,
-  Flex,
 } from '@rocket.chat/fuselage';
 import {
   BLOCK_CONTEXT,
@@ -93,6 +92,6 @@ const genericImage = (element, context) => {
   }
 };
 
-export const ModalImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='center'><Box><Media element={element}/></Box></Flex.Container></Block>;
+export const ModalImage = ({ element, context }) => genericImage(element, context) || <Block><Box display='flex' justifyContent='center'><Media element={element}/></Box></Block>;
 
-export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Flex.Container justifyContent='start'><Box><Media element={element}/></Box></Flex.Container></Block>;
+export const MessageImage = ({ element, context }) => genericImage(element, context) || <Block><Box display='flex' justifyContent='start'><Media element={element}/></Box></Block>;

packages/fuselage-ui-kit/src/Input.js

@@ -34,7 +34,7 @@ export const PlainInput = React.memo(({ element, context, index, parser }) => {
   return (
     <Component
       key={index}
-      mod-loading={loading}
+      disabled={loading}
       id={actionId}
       name={actionId}
       rows={6}

packages/fuselage-ui-kit/src/Overflow.js

@@ -40,15 +40,15 @@ export const Overflow = ({ context, options, parser, ...element }) => {
         onBlur={hide}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}
-        mod-loading={loading}
+        disabled={loading}
       >
         <Icon name='kebab' size={20} />
       </Button>
       <PositionAnimated
         width='auto'
         visible={visible}
         anchor={ref}
-        placement='bottom right'
+        placement='bottom-start'
       >
         <Options
           onSelect={handleSelection}

packages/fuselage-ui-kit/src/StaticSelect.js

@@ -6,7 +6,7 @@ import {
 
 import { useBlockContext } from './hooks';
 
-export const StaticSelect = ({
+export const StaticSelect = React.memo(({
   options,
   onChange,
   parser,
@@ -15,17 +15,18 @@ export const StaticSelect = ({
   ...element
 }) => {
   const [{ loading, value, error }, action] = useBlockContext(element, context);
+
   return <SelectFiltered
     error={error}
     value={value}
-    mod-loading={loading}
+    disabled={loading}
     options={options.map((option) => [option.value, parser.text(option.text)])}
     onChange={(value) => action({ target: { value } })}
     placeholder={parser.text(placeholder)} />;
-};
+});
 
 
-export const MultiStaticSelect = ({
+export const MultiStaticSelect = React.memo(({
   context,
   options,
   parser,
@@ -35,9 +36,9 @@ export const MultiStaticSelect = ({
   const [{ loading, value, error }, action] = useBlockContext(element, context);
   return <MultiSelectFiltered
     value={value}
-    mod-loading={loading}
+    disabled={loading}
     error={error}
     options={options.map((option) => [option.value, parser.text(option.text)])}
     onChange={(value) => action({ target: { value } })}
     placeholder={parser.text(placeholder)} />;
-};
+});

packages/fuselage-ui-kit/src/Button.js → packages/fuselage-ui-kit/src/UIKitButton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Throbber,
 } from '@rocket.chat/fuselage';
 
 import { useBlockContext, getStyle } from './hooks';
@@ -9,14 +10,13 @@ export const UIKitButton = ({ element, context, parser }) => {
   const [{ loading }, action] = useBlockContext(element, context);
   return (
     <Button
-      mod-mod-loading={loading}
+      disabled={loading}
       {...getStyle(element.style)}
       small
       data-group={element.groupId}
       key={element.actionId}
-      children={parser.plainText(element.text)}
       onClick={action}
       value={element.value}
-    />
+    >{ loading ? <Throbber/> : parser.plainText(element.text)}</Button>
   );
 };

packages/fuselage-ui-kit/src/hooks.js

@@ -1,12 +1,13 @@
-import React, { useContext, useState, useCallback } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import {
   BLOCK_CONTEXT,
 } from '@rocket.chat/ui-kit';
 
 export const defaultContext = {
   action: (...args) => console.log(JSON.stringify(args)),
   state: console.log,
-  appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz',
+  appId: 'core',
   errors: {},
 };
 
@@ -20,22 +21,25 @@ export const useBlockContext = ({ blockId, actionId, appId, initialValue }, cont
 
   const error = errors && actionId && errors[actionId];
 
-  const actionFunction = useCallback(async ({ target: { value } }) => {
+  const actionFunction = useMutableCallback(async ({ target: { value } }) => {
     setLoading(true);
+    setValue(value);
     await action({ blockId, appId: appId || appIdFromContext, actionId, value, viewId });
     setLoading(false);
-  }, [actionId, blockId]);
+  });
 
-  const stateFunction = useCallback(async ({ target: { value } }) => {
+  const stateFunction = useMutableCallback(async ({ target: { value } }) => {
     setValue(value);
     await state({ blockId, appId, actionId, value });
-  }, [actionId, blockId]);
+  });
+
+  const result = useMemo(() => ({ loading, setLoading, error, value }), [loading, setLoading, error, value]);
 
   if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) {
-    return [{ loading, setLoading, error }, actionFunction];
+    return [result, actionFunction];
   }
 
-  return [{ loading, setLoading, value, error }, stateFunction];
+  return [result, stateFunction];
 };
 
 export const getStyle = (style) => {

packages/fuselage-ui-kit/src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Divider,
-  Flex,
   Margins,
   InputBox,
   Box,
@@ -26,11 +25,15 @@ import { MessageImage, ModalImage } from './Image';
 import { StaticSelect, MultiStaticSelect } from './StaticSelect';
 import { Block } from './Block';
 import { Overflow } from './Overflow';
-import { UIKitButton } from './Button';
+import { UIKitButton } from './UIKitButton';
 import { useBlockContext } from './hooks';
 
 export * from './hooks';
 
+export const version = 'DEVELOPMENT';
+
+console.log(`fuselage-ui-kit version: ${ version }`);
+
 function mrkdwn({ text/* , type = 'plain_text'*/ } = { text: '' }) {
   return text;
 }
@@ -74,7 +77,7 @@ class MessageParser extends UiKitParserMessage {
   }
 
   divider(_, __, key) {
-    return <Margins block={'x24'} key={key}> <Divider /> </Margins>;
+    return <Divider mb='x24' key={key}/>;
   }
 
   section(args, context, index) {
@@ -95,7 +98,7 @@ class MessageParser extends UiKitParserMessage {
         key={key}
         error={error}
         value={value}
-        mod-mod-loading={loading}
+        disabled={loading}
         id={actionId}
         name={actionId}
         rows={6}
@@ -113,30 +116,22 @@ class MessageParser extends UiKitParserMessage {
   context({ elements }, context, key) {
     return (
       <Block key={key}>
-        <Box is='div'>
-          <Flex.Container alignItems='center'>
-            <Margins all='neg-x4'>
-              <Box is='div'>
-                {elements.map((element, i) => (
-                  <Margins all='x4' key={i}>
-                    <Flex.Item>
-                      {[
-                        ELEMENT_TYPES.PLAIN_TEXT,
-                        ELEMENT_TYPES.MARKDOWN,
-                      ].includes(element.type) ? (
-                          <Box is='span' fontScale='c1' color='info'>
-                            {this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
-                          </Box>
-                        )
-                        : this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)
-                    || element.type
-                      }
-                    </Flex.Item>
-                  </Margins>
-                ))}
-              </Box>
+        <Box display='flex' alignItems='center' m='neg-x4'>
+          {elements.map((element, i) => (
+            <Margins all='x4' key={i}>
+              {[
+                ELEMENT_TYPES.PLAIN_TEXT,
+                ELEMENT_TYPES.MARKDOWN,
+              ].includes(element.type) ? (
+                  <Box is='span' fontScale='c1' color='info'>
+                    {this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)}
+                  </Box>
+                )
+                : this.renderContext(element, BLOCK_CONTEXT.CONTEXT, this)
+              || element.type
+              }
             </Margins>
-          </Flex.Container>
+          ))}
         </Box>
       </Block>
     );
@@ -154,7 +149,7 @@ class MessageParser extends UiKitParserMessage {
   }
 
   staticSelect(element, context, key) {
-    return <StaticSelect key={key} {...element} parser={this} />;
+    return <StaticSelect key={key} context={context} {...element} parser={this} />;
   }
 
   // selectInput(element, context, key) {

packages/fuselage-ui-kit/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "es5",
+      "sourceMap": true,
+      "lib":[
+        "es2018"
+      ]
+    },
+    "exclude": [
+      "node_modules"
+    ]
+  }
+

packages/fuselage-ui-kit/webpack.config.js

@@ -3,6 +3,9 @@
 const path = require('path');
 
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const ReplacePlugin = require('webpack-plugin-replace');
+
+const pkg = require('./package.json');
 
 module.exports = (env, { mode = 'production' }) => ({
   entry: {
@@ -23,6 +26,11 @@ module.exports = (env, { mode = 'production' }) => ({
         exclude: /node_modules/,
         use: 'babel-loader',
       },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+      },
     ],
   },
   externals: [
@@ -47,5 +55,11 @@ module.exports = (env, { mode = 'production' }) => ({
       reportFilename: '../bundle-report.html',
       openAnalyzer: false,
     }),
-  ],
+    new ReplacePlugin({
+      include: ['index.js'],
+      values: {
+        '"DEVELOPMENT"': JSON.stringify(pkg.version),
+      },
+    }),
+  ].filter(Boolean),
 });

packages/fuselage/package.json

@@ -131,4 +131,4 @@
     "access": "public"
   },
   "gitHead": "f8467b8ffb6f90d91b46fbcdd5dca169235916a4"
-}
+}

packages/fuselage/src/components/Options/index.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useLayoutEffect, useState, forwardRef, useMemo } from 'react';
+import React, { useLayoutEffect, useState, forwardRef, useMemo } from 'react';
+import { useMutableCallback, useDebouncedState } from '@rocket.chat/fuselage-hooks';
 
 
 import { AnimatedVisibility, Box, Scrollable } from '../Box';
@@ -8,6 +9,7 @@ import { CheckBox } from '../CheckBox';
 import Margins from '../Margins';
 import { Tile } from '../Tile';
 
+
 export const ACTIONS = {
   ESC: 27,
   KEY_UP: 38,
@@ -53,9 +55,8 @@ export const Options = React.forwardRef(({
       current.scrollTop = li.offsetTop;
     }
   }, [cursor, ref]);
-
   const optionsMemoized = useMemo(() => options.map(([value, label, selected], i) => <OptionComponent role='option' label={label} onMouseDown={(e) => prevent(e) & onSelect([value, label]) && false} key={value} value={value} selected={selected || (multiple !== true && null)} focus={cursor === i || null}/>), [options, multiple, cursor, onSelect]);
-  return <Box rcx-options is='div' {...props}>
+  return <Box rcx-options {...props}>
     <Tile padding={0} paddingBlock={'x12'} paddingInline={0} elevation='2'>
       <Scrollable vertical smooth>
         <Tile ref={ref} elevation='0' padding='none' maxHeight={maxHeight} onMouseDown={prevent} onClick={prevent} is='ol' aria-multiselectable={multiple} role='listbox' aria-multiselectable='true' aria-activedescendant={options && options[cursor] && options[cursor][0]}>
@@ -68,9 +69,9 @@ export const Options = React.forwardRef(({
 });
 
 const useVisible = (initialVisibility = AnimatedVisibility.HIDDEN) => {
-  const [visible, setVisible] = useState(initialVisibility);
-  const hide = useCallback(() => setVisible(AnimatedVisibility.HIDDEN), []);
-  const show = useCallback(() => setVisible(AnimatedVisibility.VISIBLE), []);
+  const [visible, setVisible] = useDebouncedState(initialVisibility, 10);
+  const hide = useMutableCallback(() => setVisible(AnimatedVisibility.HIDDEN));
+  const show = useMutableCallback(() => setVisible(AnimatedVisibility.VISIBLE));
 
   return [visible, hide, show];
 };
@@ -79,15 +80,15 @@ export const useCursor = (initial, options, onChange) => {
   const [cursor, setCursor] = useState(initial);
   const visibilityHandler = useVisible();
   const [visibility, hide, show] = visibilityHandler;
-  const reset = () => setCursor(0);
-  const handleKeyUp = (e) => {
+  const reset = useMutableCallback(() => setCursor(0));
+  const handleKeyUp = useMutableCallback((e) => {
     const { keyCode } = e;
     if (AnimatedVisibility.HIDDEN === visibility && keyCode === ACTIONS.TAB) {
       return show();
     }
-  };
+  });
 
-  const handleKeyDown = (e) => {
+  const handleKeyDown = useMutableCallback((e) => {
     const lastIndex = options.length - 1;
     const { keyCode, key } = e;
     if (AnimatedVisibility.HIDDEN === visibility && keyCode !== ACTIONS.ESC && keyCode !== ACTIONS.TAB) {
@@ -120,7 +121,9 @@ export const useCursor = (initial, options, onChange) => {
         e.nativeEvent.stopImmediatePropagation(); // TODO
         e.stopPropagation();
       }
-      return onChange(options[cursor], visibilityHandler);
+      hide();
+      onChange(options[cursor], visibilityHandler);
+      return;
     case ACTIONS.ESC:
       e.preventDefault();
       reset();
@@ -138,7 +141,7 @@ export const useCursor = (initial, options, onChange) => {
         ~index && setCursor(index);
       }
     }
-  };
+  });
 
   return [cursor, handleKeyDown, handleKeyUp, reset, visibilityHandler];
 };

packages/fuselage/src/components/Options/styles.scss

@@ -19,6 +19,12 @@
   }
 
   &--selected {
-    color: colors.foreground(primary);
+    background: colors.neutral(500);
+  }
+}
+
+.rcx-options:hover {
+  .rcx-option--focus:not(.rcx-option--selected):not(:hover) {
+    background: initial;
   }
 }

packages/fuselage/src/components/Select/Select.js

@@ -1,10 +1,9 @@
-import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
-import React, { useState, useLayoutEffect, useRef, useCallback, useEffect, forwardRef } from 'react';
+import { useMutableCallback, useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import React, { useState, useRef, useCallback, useEffect, forwardRef, useMemo } from 'react';
 
-import { PositionAnimated, Box, Flex, AnimatedVisibility } from '../Box';
+import { PositionAnimated, Box, AnimatedVisibility } from '../Box';
 import { Icon } from '../Icon';
 import { InputBox } from '../InputBox';
-import Margins from '../Margins';
 import { Options, useCursor } from '../Options';
 
 export const Addon = forwardRef((props, ref) => <Box is='div' rcx-select__addon ref={ref} {...props} />);
@@ -13,6 +12,18 @@ const Wrapper = forwardRef((props, ref) => <Box is='div' rcx-select__wrapper ref
 
 export const Focus = React.forwardRef((props, ref) => <Box ref={ref} fontScale='p2' color='hint' rcx-select__focus is='button' type='button' {...props}/>);
 
+const useDidUpdate = (func, deps = []) => {
+  const didMount = useRef(false);
+  const fn = useMutableCallback(func);
+
+  useEffect(() => {
+    if (didMount.current) {
+      fn();
+    }
+    didMount.current = true;
+  }, deps);
+};
+
 export const Select = ({
   value,
   filter,
@@ -30,68 +41,62 @@ export const Select = ({
   const [internalValue, setInternalValue] = useState(value);
 
   const currentValue = value !== undefined ? value : internalValue;
+
+  const internalChangedByKeyboard = useMutableCallback(([value]) => {
+    setInternalValue(value);
+    onChange(value);
+  });
+
   const option = options.find((option) => getValue(option) === currentValue);
+
   const index = options.indexOf(option);
 
-  const isFirstRun = useRef(true);
+  const filteredOptions = useMemo(() => {
+    const mapOptions = ([value, label]) => {
+      if (currentValue === value) {
+        return [value, label, true];
+      }
+      return [value, label];
+    };
 
-  const internalChanged = ([value]) => {
+    const applyFilter = ([, option]) => !filter || ~option.toLowerCase().indexOf(filter.toLowerCase());
+    return options.filter(applyFilter).map(mapOptions);
+  }, [options, currentValue, filter]);
+
+  const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(index, filteredOptions, internalChangedByKeyboard);
+
+
+  const internalChangedByClick = useMutableCallback(([value]) => {
     setInternalValue(value);
     onChange(value);
-  };
-
-  const mapOptions = ([value, label]) => {
-    if (currentValue === value) {
-      return [value, label, true];
-    }
-    return [value, label];
-  };
+    hide();
+  });
 
-  const applyFilter = ([, option]) => !filter || ~option.toLowerCase().indexOf(filter.toLowerCase());
-  const filteredOptions = options.filter(applyFilter).map(mapOptions);
-  const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(index, filteredOptions, internalChanged);
 
   const ref = useRef();
 
   const { ref: containerRef, borderBoxSize } = useResizeObserver();
 
-  useLayoutEffect(() => {
-    if (isFirstRun.current) {
-      isFirstRun.current = false;
-      return;
-    }
-    hide();
-    ref.current.focus();
-  }, [internalValue, hide]);
-
-  useEffect(reset, [filter]);
+  useDidUpdate(reset, [filter, internalValue]);
 
   const valueLabel = getLabel(option);
 
   const visibleText = (filter === undefined || visible === AnimatedVisibility.HIDDEN) && (valueLabel || (placeholder || typeof placeholder === 'string'));
   return (
-    <Box rcx-select disabled={disabled} ref={containerRef} onClick={() => ref.current.focus() & show()} className={[
+    <Box rcx-select disabled={disabled} ref={containerRef} onClick={useMutableCallback(() => ref.current.focus() & show())} className={useMemo(() => [
       error && 'invalid',
       disabled && 'disabled',
-    ]}
+    ], [error, disabled])}
     {...props}
     >
-      <Flex.Item>
-        <Flex.Container>
-          <Margins inline='neg-x4'>
-            <Wrapper rcx-select__wrapper--hidden={!!visibleText}>
-              { visibleText && <Flex.Item grow={1} shrink={1}>
-                <Margins inline='x4'>
-                  <Box is='span' rcx-select__item fontScale='p2' color={valueLabel ? 'default' : 'hint'}>{visibleText}</Box>
-                </Margins>
-              </Flex.Item>}
-              <Anchor disabled={disabled} rcx-input-box--undecorated filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
-              <Margins inline='x4'><Addon children={<Icon name={ visible === AnimatedVisibility.VISIBLE ? 'cross' : 'chevron-down'} size='x20' />}/></Margins>
-            </Wrapper>
-          </Margins>
-        </Flex.Container>
-      </Flex.Item>
-      <PositionAnimated visible={visible} anchor={containerRef}><_Options width={borderBoxSize.inlineSize} role='listbox' filter={filter} options={filteredOptions} onSelect={internalChanged} cursor={cursor} /></PositionAnimated>
+      <Wrapper display='flex' mi='neg-x4' rcx-select__wrapper--hidden={!!visibleText}>
+        { visibleText
+          && <Box flexGrow={1} is='span' mi='x4' rcx-select__item fontScale='p2' color={valueLabel ? 'default' : 'hint'}>{visibleText}</Box>
+        }
+        <Anchor disabled={disabled} rcx-input-box--undecorated filter={filter} ref={ref} aria-haspopup='listbox' onClick={show} onBlur={hide} onKeyUp={handleKeyUp} onKeyDown={handleKeyDown} />
+        <Addon mi='x4' children={<Icon name={ visible === AnimatedVisibility.VISIBLE ? 'cross' : 'chevron-down'} size='x20' />}/>
+      </Wrapper>
+      <PositionAnimated visible={visible} anchor={containerRef}><_Options width={borderBoxSize.inlineSize} role='listbox' filter={filter} options={filteredOptions} onSelect={internalChangedByClick} cursor={cursor} /></PositionAnimated>
     </Box>);
 };
 
@@ -101,6 +106,6 @@ export const SelectFiltered = ({
   ...props
 }) => {
   const [filter, setFilter] = useState('');
-  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <Margins inline='x4'><Flex.Item grow={1} shrink={1}><InputBox.Input className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={() => {}} onInput={(e) => setFilter(e.currentTarget.value)} {...props} rcx-input-box--undecorated /></Flex.Item></Margins>), []);
+  const anchor = useCallback(React.forwardRef(({ children, filter, ...props }, ref) => <InputBox.Input mi='x4' flexGrow={1} className='rcx-select__focus' ref={ref} placeholder={placeholder} value={filter} onChange={useMutableCallback((e) => setFilter(e.currentTarget.value))} {...props} rcx-input-box--undecorated />), []);
   return <Select placeholder={null} filter={filter} options={options} {...props} anchor={anchor}/>;
 };

packages/ui-kit/src/index.ts

@@ -1,5 +1,7 @@
 export const version = "DEVELOPMENT";
 
+console.log(`ui-kit version: ${version}`);
+
 export enum ELEMENT_TYPES {
   IMAGE= 'image',
   BUTTON= 'button',

packages/ui-kit/webpack.config.js

@@ -28,10 +28,10 @@ module.exports = (env, argv) => ({
     ],
   },
   plugins: [
-    new ReplacePlugin({
+      new ReplacePlugin({
       include: ['index.ts'],
       values: {
-        '"VERSION"': JSON.stringify(pkg.version),
+        '"DEVELOPMENT"': JSON.stringify(pkg.version),
       },
     }),
   ],