@128technology/ui - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

package.json

 {
   "name": "@128technology/ui",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "128 Technology UI component library.",
@@ -5,0 +5,0 @@ "main": "dist/128UI.js",

src/components/Autocomplete/Autocomplete.jsx

@@ -16,2 +16,22 @@ import React from 'react';
 
+const Tethered = ({ children }) => {
+  return (
+    <TetherComponent
+      renderElementTo="body"
+      attachment="top left"
+      targetAttachment="top left"
+      className="ui-128__autocomplete--options"
+      constraints={[
+        {
+          to: 'window',
+          attachment: 'together',
+          pin: ['top']
+        }
+      ]}
+    >
+      {children}
+    </TetherComponent>
+  );
+};
+
 /**
@@ -41,19 +61,6 @@ * This is a custom version of the react-select component
     return (
-      <TetherComponent
-        renderElementTo="body"
-        ref="tethered-component"
-        attachment="top left"
-        targetAttachment="top left"
-        className="ui-128__autocomplete--options"
-        constraints={[
-          {
-            to: 'window',
-            attachment: 'together',
-            pin: ['top']
-          }
-        ]}
-      >
+      <Tethered>
         <div />
         {React.cloneElement(menu, { style: { position: 'static', width: selectWidth } })}
-      </TetherComponent>
+      </Tethered>
     );
@@ -64,2 +71,18 @@ }
 /**
+ * This is a custom version of the react-select component,
+ * specifically when creatable options are allowed,
+ * that will allow the options menu to overflow and be visible
+ * in containers that have overflow: hidden, scroll, etc.
+ *
+ * https://github.com/JedWatson/react-select/issues/810#issuecomment-284573308
+ */
+const TetheredCreatable = props => {
+  return (
+    <Tethered>
+      <Creatable {...props}>{creatableProps => <TetheredSelect {...creatableProps} />}</Creatable>
+    </Tethered>
+  );
+};
+
+/**
  * This component is essentially a text field combined with
@@ -119,3 +142,3 @@ * a dropdown menu. The user can type into the field and will
 
-    const selectComponent = creatable ? Creatable : TetheredSelect;
+    const selectComponent = creatable ? TetheredCreatable : TetheredSelect;
 
@@ -122,0 +145,0 @@ return (

src/components/Table/Table.jsx

@@ -20,3 +20,3 @@ import React from 'react';
   const newExpandedRowRender = _.isFunction(expandedRowRender)
-    ? (...args) => <div className="ui-128 ui-128__table--nested">{expandedRowRender(...args)}</div>
+    ? (...args) => <span className="ui-128 ui-128__table--nested">{expandedRowRender(...args)}</span>
     : null;
@@ -23,0 +23,0 @@

No alert changes

Improved metrics

Total package byte prevSize

12448577

increased by0.02%

Lines of code

102790

increased by0.05%

No dependency changes