@performant-software/semantic-components 0.5.4 → 0.5.7

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "0.5.4",
+  "version": "0.5.7",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
-  "style": "./build/styles.css",
+  "style": [
+    "./build/main.css",
+    "./build/semantic-ui.css"
+  ],
   "scripts": {
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^0.5.4",
+    "@performant-software/shared-components": "^0.5.7",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
-    "flow-copy-source": "^2.0.9",
     "i18next": "^19.4.4",
     "react-calendar": "^3.3.0",
     "react-color": "^2.18.1",
@@ -21,7 +23,7 @@
     "react-i18next": "^11.4.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^1.0.2",
-    "semantic-ui-css": "^2.4.1",
+    "semantic-ui-less": "^2.4.1",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"
   },
@@ -30,7 +32,11 @@
     "react-dom": ">= 16.13.1 < 18.0.0"
   },
   "devDependencies": {
-    "@performant-software/webpack-config": "^0.5.4",
+    "@performant-software/webpack-config": "^0.5.7",
+    "flow-copy-source": "^2.0.9",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

package/src/components/AccordionDataList.js

@@ -61,6 +61,7 @@ const Accordion = useList((props: AccordionProps) => {
       <Button.Group>
         { _.map(actions, (action, index) => (
           <Button
+            aria-label={action.name}
             basic
             color={action.color}
             icon={action.icon}
@@ -166,11 +167,13 @@ const AccordionDataList = (props: Props) => {
         }}
       >
         <Button
+          aria-label='Sort by'
           content={sortValue}
           icon={props.sortDirection === SORT_ASCENDING ? 'sort alphabet up' : 'sort alphabet down'}
           onClick={(e) => sortDropdown.current && sortDropdown.current.handleClick(e)}
         />
         <Dropdown
+          aria-label='Sort by toggle'
           className='button icon'
           floating
           options={_.map(props.sort, (sort) => ({

package/src/components/AccordionList.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { Timer, Utility } from '@performant-software/shared-components';
+import { Object as ObjectUtils, Timer } from '@performant-software/shared-components';
 import React, { Component } from 'react';
 import {
   Button,
@@ -154,7 +154,7 @@ class AccordionList extends Component<Props, State> {
     let copy;
     if (this.props.onCopy) {
       copy = this.props.onCopy(selectedItem);
-      if (Utility.isPromise(copy)) {
+      if (ObjectUtils.isPromise(copy)) {
         copy.then((item) => {
           this.setState({ selectedItem: item, modalAdd: true });
         });
@@ -267,6 +267,7 @@ class AccordionList extends Component<Props, State> {
           className='accordion-header'
         >
           <Input
+            aria-label='Search'
             autoFocus
             className='search'
             icon='search'
@@ -329,6 +330,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Add'
         basic
         compact
         icon='plus'
@@ -349,6 +351,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Checkbox
+        aria-label='Select All'
         onClick={(e, el) => this.props.onSelectAll(el, toBeSelected, this.state.items, e)}
         checked={!toBeSelected.length}
       />
@@ -399,6 +402,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Delete'
         basic
         compact
         icon='trash'
@@ -421,6 +425,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Edit'
         basic
         compact
         icon='edit'
@@ -443,6 +448,7 @@ class AccordionList extends Component<Props, State> {
 
     return (
       <Button
+        aria-label='Copy'
         basic
         compact
         icon='copy'
@@ -551,6 +557,7 @@ class AccordionList extends Component<Props, State> {
     const selected = this.props.selectedRows.find((r) => r.id === item.id);
     return (
       <Checkbox
+        aria-label='Select'
         key={`select-checkbox-${item.id}`}
         className='row-select-checkbox'
         onClick={(e, el) => this.props.onRowSelect(el, item, e)}

package/src/components/AccordionSelector.js

@@ -15,6 +15,7 @@ import {
 import _ from 'underscore';
 import i18n from '../i18n/i18n';
 import EditModal from './EditModal';
+import ModalContext from '../context/ModalContext';
 import NestedAccordion from './NestedAccordion';
 import SelectizeHeader from './SelectizeHeader';
 import Toaster from './Toaster';
@@ -39,7 +40,6 @@ type Props = {
   renderItem: (item: any) => string | Element<any>,
   selectedItems?: Array<any>,
   showToggle: (item: any) => boolean,
-  t: (key: string) => string,
   title?: string
 };
 
@@ -187,93 +187,100 @@ class AccordionSelector extends Component<Props, State> {
    */
   render() {
     return (
-      <Modal
-        className='accordion-selector'
-        open={this.props.open}
-        size='small'
-      >
-        <Modal.Header>
-          <Grid
-            columns={2}
-            verticalAlign='middle'
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className='accordion-selector'
+            mountNode={mountNode}
+            open={this.props.open}
+            size='small'
           >
-            <Grid.Column
-              textAlign='left'
-            >
-              <Header
-                content={this.props.title
-                  ? this.props.title
-                  : i18n.t('AccordionSelector.title')}
+            <Modal.Header>
+              <Grid
+                columns={2}
+                verticalAlign='middle'
+              >
+                <Grid.Column
+                  textAlign='left'
+                  width={7}
+                >
+                  <Header
+                    content={this.props.title
+                      ? this.props.title
+                      : i18n.t('AccordionSelector.title')}
+                  />
+                </Grid.Column>
+                <Grid.Column
+                  textAlign='right'
+                  width={9}
+                >
+                  <Input
+                    aria-label='Search'
+                    autoFocus
+                    icon='search'
+                    onKeyDown={Timer.clearSearchTimer.bind(this)}
+                    onKeyUp={Timer.setSearchTimer.bind(this, this.onSearch.bind(this))}
+                    onChange={this.onSearchChange.bind(this)}
+                    size='mini'
+                    type='text'
+                    value={this.state.searchQuery}
+                  />
+                  { this.renderAddButton() }
+                </Grid.Column>
+              </Grid>
+            </Modal.Header>
+            <Modal.Content>
+              <SelectizeHeader
+                isSelected={(item) => this.state.selectedItem === item}
+                items={this.state.selectedItems}
+                onItemClick={this.onItemSelection.bind(this)}
+                renderItem={this.props.renderItem.bind(this)}
               />
-            </Grid.Column>
-            <Grid.Column
-              textAlign='right'
-            >
-              <Input
-                autoFocus
-                icon='search'
-                onKeyDown={Timer.clearSearchTimer.bind(this)}
-                onKeyUp={Timer.setSearchTimer.bind(this, this.onSearch.bind(this))}
-                onChange={this.onSearchChange.bind(this)}
-                size='mini'
-                type='text'
-                value={this.state.searchQuery}
+              <NestedAccordion
+                getChildItems={this.props.getChildItems.bind(this, this.state.items)}
+                onItemClick={this.onItemClick.bind(this)}
+                onItemToggle={this.onItemToggle.bind(this)}
+                renderItem={this.props.renderItem.bind(this)}
+                renderRight={this.renderRight.bind(this)}
+                rootItems={this.props.getRootItems(this.state.items)}
+                showToggle={this.props.showToggle.bind(this)}
               />
-              { this.renderAddButton() }
-            </Grid.Column>
-          </Grid>
-        </Modal.Header>
-        <Modal.Content>
-          <SelectizeHeader
-            isSelected={(item) => this.state.selectedItem === item}
-            items={this.state.selectedItems}
-            onItemClick={this.onItemSelection.bind(this)}
-            renderItem={this.props.renderItem.bind(this)}
-          />
-          <NestedAccordion
-            getChildItems={this.props.getChildItems.bind(this, this.state.items)}
-            onItemClick={this.onItemClick.bind(this)}
-            onItemToggle={this.onItemToggle.bind(this)}
-            renderItem={this.props.renderItem.bind(this)}
-            renderRight={this.renderRight.bind(this)}
-            rootItems={this.props.getRootItems(this.state.items)}
-            showToggle={this.props.showToggle.bind(this)}
-          />
-          { this.renderAddModal() }
-          { this.state.saved && (
-            <Toaster
-              onDismiss={() => this.setState({ saved: false })}
-              type={Toaster.MessageTypes.positive}
-            >
-              <Message.Header
-                content={i18n.t('Common.messages.save.header')}
-              />
-              <Message.Content
-                content={i18n.t('Common.messages.save.content')}
-              />
-            </Toaster>
-          )}
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            onClick={this.props.onSave.bind(this, this.state.selectedItems)}
-            primary
-            size='medium'
-            type='submit'
-          >
-            { this.props.t('Common.buttons.save') }
-          </Button>
-          <Button
-            inverted
-            onClick={this.props.onClose.bind(this)}
-            primary
-            size='medium'
-            type='button'
-          >
-            { this.props.t('Common.buttons.cancel') }
-          </Button>
-        </Modal.Actions>
-      </Modal>
+              { this.renderAddModal() }
+              { this.state.saved && (
+                <Toaster
+                  onDismiss={() => this.setState({ saved: false })}
+                  type={Toaster.MessageTypes.positive}
+                >
+                  <Message.Header
+                    content={i18n.t('Common.messages.save.header')}
+                  />
+                  <Message.Content
+                    content={i18n.t('Common.messages.save.content')}
+                  />
+                </Toaster>
+              )}
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                onClick={this.props.onSave.bind(this, this.state.selectedItems)}
+                primary
+                size='medium'
+                type='submit'
+              >
+                { i18n.t('Common.buttons.save') }
+              </Button>
+              <Button
+                basic
+                onClick={this.props.onClose.bind(this)}
+                size='medium'
+                type='button'
+              >
+                { i18n.t('Common.buttons.cancel') }
+              </Button>
+            </Modal.Actions>
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }
 
@@ -291,7 +298,7 @@ class AccordionSelector extends Component<Props, State> {
       <Button
         basic
         className='add-button'
-        content={this.props.t('Common.buttons.add')}
+        content={i18n.t('Common.buttons.add')}
         icon='plus'
         onClick={() => this.setState({ modalAdd: true })}
       />

package/src/components/ArrowButtons.js

@@ -23,11 +23,13 @@ const ArrowButtons = (props: Props) => (
     vertical
   >
     <Button
+      aria-label='Move Right'
       basic
       icon='arrow right'
       onClick={props.onRight.bind(this)}
     />
     <Button
+      aria-label='Move Left'
       basic
       icon='arrow left'
       onClick={props.onLeft.bind(this)}

package/src/components/CancelButton.js

@@ -11,10 +11,9 @@ type Props = {
 
 const CancelButton = (props: Props) => (
   <Button
+    basic
     disabled={props.disabled}
-    inverted
     onClick={props.onClick.bind(this)}
-    primary
     size='medium'
     type='button'
   >

package/src/components/ColorPickerModal.js

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { SketchPicker } from 'react-color';
 import { Button, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 import './ColorPickerModal.css';
 
 type Props = {
@@ -38,38 +39,42 @@ class ColorPickerModal extends Component<Props, State> {
    */
   render() {
     return (
-      <Modal
-        className='color-picker-modal'
-        onClose={this.props.onClose.bind(this)}
-        open={this.props.open}
-      >
-        <Modal.Content>
-          <SketchPicker
-            color={this.state.selectedColor}
-            disableAlpha={false}
-            onChangeComplete={(selectedColor) => this.setState({ selectedColor })}
-          />
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            onClick={this.props.onSave.bind(this, this.state.selectedColor)}
-            primary
-            size='medium'
-            type='submit'
+      <ModalContext.Consumer>
+        { (mountNode) => (
+          <Modal
+            className='color-picker-modal'
+            mountNode={mountNode}
+            onClose={this.props.onClose.bind(this)}
+            open={this.props.open}
           >
-            { i18n.t('Common.buttons.save') }
-          </Button>
-          <Button
-            inverted
-            onClick={this.props.onClose.bind(this)}
-            primary
-            size='medium'
-            type='button'
-          >
-            { i18n.t('Common.buttons.cancel') }
-          </Button>
-        </Modal.Actions>
-      </Modal>
+            <Modal.Content>
+              <SketchPicker
+                color={this.state.selectedColor}
+                disableAlpha={false}
+                onChangeComplete={(selectedColor) => this.setState({ selectedColor })}
+              />
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                onClick={this.props.onSave.bind(this, this.state.selectedColor)}
+                primary
+                size='medium'
+                type='submit'
+              >
+                { i18n.t('Common.buttons.save') }
+              </Button>
+              <Button
+                basic
+                onClick={this.props.onClose.bind(this)}
+                size='medium'
+                type='button'
+              >
+                { i18n.t('Common.buttons.cancel') }
+              </Button>
+            </Modal.Actions>
+          </Modal>
+        )}
+      </ModalContext.Consumer>
     );
   }
 }

package/src/components/DataList.js

@@ -471,6 +471,7 @@ const useDataList = (WrappedComponent: ComponentType<any>) => (
 
       return (
         <Input
+          aria-label='Search'
           type='text'
           icon='search'
           input={{

package/src/components/DataTable.js

@@ -240,6 +240,7 @@ class DataTable extends Component<Props, State> {
 
     const actionButton = (
       <Button
+        aria-label={action.name}
         basic
         compact
         color={action.color}

package/src/components/DataTableColumnSelector.js

@@ -43,6 +43,17 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
       };
     }
 
+    /**
+     * Reset the columns on the state when the props change.
+     *
+     * @param prevProps
+     */
+    componentDidUpdate(prevProps: Props): * {
+      if (prevProps.columns !== this.props.columns) {
+        this.setState({ columns: this.props.columns });
+      }
+    }
+
     /**
      * Toggles the hidden property for the passed column.
      *
@@ -111,11 +122,12 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
         <>
           { this.props.renderListHeader && this.props.renderListHeader() }
           <Dropdown
+            aria-label='Select Columns'
             basic
             button
             icon='cog'
             className='icon configure-button open-right'
-            simple
+            closeOnBlur={false}
           >
             <Dropdown.Menu>
               { this.state.columns
@@ -127,11 +139,15 @@ const useColumnSelector = (WrappedComponent: ComponentType<any>) => (
                     key={c.name}
                     onDrag={this.onDrag.bind(this)}
                   >
-                    <Dropdown.Item>
+                    <Dropdown.Item
+                      aria-dropeffect='move'
+                      onClick={(e) => e.stopPropagation()}
+                    >
                       <Icon
                         name='bars'
                       />
                       <Checkbox
+                        aria-label='Select Column'
                         checked={!c.hidden}
                         label={c.label}
                         onClick={this.onColumnCheckbox.bind(this, c)}

package/src/components/DataView.js

@@ -15,6 +15,7 @@ import DropdownButton from './DropdownButton';
 import i18n from '../i18n/i18n';
 import MenuBar from './MenuBar';
 import MenuSidebar from './MenuSidebar';
+import ModalContext from '../context/ModalContext';
 import useDataList, { SORT_ASCENDING, SORT_DESCENDING } from './DataList';
 import './DataView.css';
 
@@ -362,38 +363,43 @@ const DataView = (props: Props) => {
         )}
       </div>
       { selectedRecord && (
-        <Modal
-          as={Form}
-          centered={false}
-          className='data-view-modal'
-          closeIcon
-          onClose={() => setSelectedRecord(null)}
-          open
-        >
-          <Modal.Header
-            content={i18n.t('DataView.labels.details')}
-          />
-          <Modal.Content>
-            <Grid
-              columns={3}
-              doubling
+        <ModalContext.Consumer>
+          { (mountNode) => (
+            <Modal
+              as={Form}
+              centered={false}
+              className='data-view-modal'
+              closeIcon
+              mountNode={mountNode}
+              onClose={() => setSelectedRecord(null)}
+              open
             >
-              { _.map(mergeColumns([selectedRecord]), (column) => (
-                <Grid.Column
-                  as={Form.Field}
-                  key={column.name}
+              <Modal.Header
+                content={i18n.t('DataView.labels.details')}
+              />
+              <Modal.Content>
+                <Grid
+                  columns={3}
+                  doubling
                 >
-                  <span
-                    className='label'
-                  >
-                    { column.label }
-                  </span>
-                  { resolveValue(selectedRecord, column.name) }
-                </Grid.Column>
-              ))}
-            </Grid>
-          </Modal.Content>
-        </Modal>
+                  { _.map(mergeColumns([selectedRecord]), (column) => (
+                    <Grid.Column
+                      as={Form.Field}
+                      key={column.name}
+                    >
+                      <span
+                        className='label'
+                      >
+                        { column.label }
+                      </span>
+                      { resolveValue(selectedRecord, column.name) }
+                    </Grid.Column>
+                  ))}
+                </Grid>
+              </Modal.Content>
+            </Modal>
+          )}
+        </ModalContext.Consumer>
       )}
     </div>
   );