Updates components to TG and fixes can

code/modules/atmospherics/machinery/portable/canister.dm

@@ -266,8 +266,7 @@ obj/machinery/portable_atmospherics/canister/welder_act(mob/living/user, obj/ite
 	return TRUE
 
 /obj/machinery/portable_atmospherics/canister/obj_break(damage_flag)
-	. = ..()
+	if((stat & BROKEN) || (flags_1 & NODECONSTRUCT_1))
-	if(!.)
 		return
 	canister_break()
 

tgui/packages/tgui/components/AnimatedNumber.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { clamp, toFixed } from 'common/math';
 import { Component } from 'inferno';
 

tgui/packages/tgui/components/BlockQuote.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 import { Box } from './Box';
 

tgui/packages/tgui/components/Box.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, isFalsy, pureComponentHooks } from 'common/react';
 import { createVNode } from 'inferno';
 import { ChildFlags, VNodeFlags } from 'inferno-vnode-flags';

tgui/packages/tgui/components/Button.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';
 import { IS_IE8 } from '../byond';

tgui/packages/tgui/components/ByondUi.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { shallowDiffers } from 'common/react';
 import { debounce } from 'common/timer';
 import { Component, createRef } from 'inferno';

tgui/packages/tgui/components/Chart.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { map, zipWith } from 'common/collections';
 import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';

tgui/packages/tgui/components/Collapsible.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { Component } from 'inferno';
 import { Box } from './Box';
 import { Button } from './Button';

tgui/packages/tgui/components/ColorBox.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 

tgui/packages/tgui/components/Dimmer.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 import { Box } from './Box';
 

tgui/packages/tgui/components/Divider.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 
 export const Divider = props => {

tgui/packages/tgui/components/DraggableControl.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { clamp } from 'common/math';
 import { pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';

tgui/packages/tgui/components/Dropdown.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 import { Component } from 'inferno';
 import { Box } from './Box';

tgui/packages/tgui/components/Flex.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { IS_IE8 } from '../byond';
 import { Box, unit } from './Box';
@@ -16,7 +22,11 @@ export const computeFlexProps = props => {
   return {
     className: classes([
       'Flex',
-      IS_IE8 && 'Flex--ie8',
+      IS_IE8 && (
+        direction === 'column'
+          ? 'Flex--ie8--column'
+          : 'Flex--ie8'
+      ),
       inline && 'Flex--inline',
       spacing > 0 && 'Flex--spacing--' + spacing,
       className,

tgui/packages/tgui/components/Grid.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { Table } from './Table';
 import { pureComponentHooks } from 'common/react';
 

tgui/packages/tgui/components/Icon.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { Box } from './Box';
 

tgui/packages/tgui/components/Input.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, isFalsy } from 'common/react';
 import { Component, createRef } from 'inferno';
 import { Box } from './Box';
@@ -77,6 +83,10 @@ export class Input extends Component {
     if (input) {
       input.value = toInputValue(nextValue);
     }
+
+    if (this.props.autoFocus) {
+      setTimeout(() => input.focus(), 1);
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {

tgui/packages/tgui/components/Knob.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
 import { IS_IE8 } from '../byond';

tgui/packages/tgui/components/LabeledControls.js

@@ -0,0 +1,53 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
+import { Flex } from './Flex';
+
+export const LabeledControls = props => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return (
+    <Flex
+      mx={-0.5}
+      align="stretch"
+      justify="space-between"
+      {...rest}>
+      {children}
+    </Flex>
+  );
+};
+
+const LabeledControlsItem = props => {
+  const {
+    label,
+    children,
+    ...rest
+  } = props;
+  return (
+    <Flex.Item mx={1}>
+      <Flex
+        minWidth="52px"
+        height="100%"
+        direction="column"
+        align="center"
+        textAlign="center"
+        justify="space-between"
+        {...rest}>
+        <Flex.Item />
+        <Flex.Item>
+          {children}
+        </Flex.Item>
+        <Flex.Item color="label">
+          {label}
+        </Flex.Item>
+      </Flex>
+    </Flex.Item>
+  );
+};
+
+LabeledControls.Item = LabeledControlsItem;

tgui/packages/tgui/components/LabeledList.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { Box, unit } from './Box';
 import { Divider } from './Divider';

tgui/packages/tgui/components/Modal.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Dimmer } from './Dimmer';

tgui/packages/tgui/components/NoticeBox.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
 import { Box } from './Box';
 

tgui/packages/tgui/components/NumberInput.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { clamp } from 'common/math';
 import { classes, pureComponentHooks } from 'common/react';
 import { Component, createRef } from 'inferno';

tgui/packages/tgui/components/ProgressBar.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { clamp01, scale, keyOfMatchingRange, toFixed } from 'common/math';
 import { classes, pureComponentHooks } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';

tgui/packages/tgui/components/Section.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, isFalsy, pureComponentHooks } from 'common/react';
 import { Box } from './Box';
 

tgui/packages/tgui/components/Slider.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { clamp01, keyOfMatchingRange, scale } from 'common/math';
 import { classes } from 'common/react';
 import { IS_IE8 } from '../byond';

tgui/packages/tgui/components/Table.js

@@ -1,5 +1,11 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes, pureComponentHooks } from 'common/react';
-import { Box, computeBoxClassName, computeBoxProps } from './Box';
+import { computeBoxClassName, computeBoxProps } from './Box';
 
 export const Table = props => {
   const {

tgui/packages/tgui/components/Tabs.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 import { computeBoxClassName, computeBoxProps } from './Box';
 import { Button } from './Button';

tgui/packages/tgui/components/Tooltip.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 import { classes } from 'common/react';
 
 export const Tooltip = props => {

tgui/packages/tgui/components/index.js

@@ -1,3 +1,9 @@
+/**
+ * @file
+ * @copyright 2020 Aleksej Komarov
+ * @license MIT
+ */
+
 export { AnimatedNumber } from './AnimatedNumber';
 export { BlockQuote } from './BlockQuote';
 export { Box } from './Box';
@@ -14,6 +20,7 @@ export { Grid } from './Grid';
 export { Icon } from './Icon';
 export { Input } from './Input';
 export { Knob } from './Knob';
+export { LabeledControls } from './LabeledControls';
 export { LabeledList } from './LabeledList';
 export { Modal } from './Modal';
 export { NoticeBox } from './NoticeBox';
@@ -22,6 +29,6 @@ export { ProgressBar } from './ProgressBar';
 export { Section } from './Section';
 export { Slider } from './Slider';
 export { Table } from './Table';
+export { TextArea } from './TextArea';
 export { Tabs } from './Tabs';
 export { Tooltip } from './Tooltip';
-export { TextArea } from './TextArea';