@performant-software/semantic-components 1.0.21 → 1.0.22-beta.1

package/build/main.css

@@ -100,6 +100,9 @@
   left: auto;
   right: 1px;
 }
+.date-input.ui.icon.input > input {
+  padding-right: calc(22px + 1.1em) !important;
+}
 
 .fuzzy-date-modal .accuracy-container .ui.radio.checkbox {
   padding-right: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.21",
+  "version": "1.0.22-beta.1",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,7 +12,7 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.21",
+    "@performant-software/shared-components": "^1.0.22-beta.1",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",

package/src/components/DateInput.css

@@ -3,4 +3,7 @@
   pointer-events: inherit;
   left: auto;
   right: 1px;
-}
+}
+.date-input.ui.icon.input > input {
+  padding-right: calc(22px + 1.1em) !important;
+}

package/src/components/DateInput.js

@@ -5,14 +5,37 @@ import { Icon, Input } from 'semantic-ui-react';
 import './DateInput.css';
 
 type Props = {
+  /**
+   * Display date, which will override the default date formatting.
+   */
   display?: string,
-  formatOptions?: any,
+  /**
+   * An object containing date-time formatting options used by JavaScript Date objects.
+   */
+  formatOptions?: DateTimeFormatOptions,
+  /**
+   * Locale identifier (Unicode CLDR) for formatting dates and times.
+   */
   locale?: string,
+  /**
+   * Callback fired when the date in the input field is changed.
+   */
   onChange: (date: ?Date) => void,
+  /**
+   * Callback fired when the date input field is clicked, typically opening the actual method of
+   * input (such as the <code>DatePicker</code> component).
+   */
   onClick: () => void,
+  /**
+   * Current value of the date input form field, as a JavaScript Date object, or null.
+   */
   value?: ?Date
 }
 
+/**
+ * This input component is used to display and clear a date. It must be used with an additional
+ * component, such as `DatePicker`, to actually input the date.
+ */
 const DateInput = (props: Props) => {
   const formatDate = () => {
     let date = '';

package/src/components/ListLoader.js

@@ -6,9 +6,15 @@ import i18n from '../i18n/i18n';
 import './ListLoader.css';
 
 type Props = {
+  /**
+   * If present, the list loader spinner will display.
+   */
   active: boolean
 };
 
+/**
+ * A loader displays a spinner when active.
+ */
 const ListLoader = (props: Props) => (
   <Dimmer.Dimmable
     as={Segment}

package/src/components/PlayButton.js

@@ -5,11 +5,23 @@ import { Button } from 'semantic-ui-react';
 import './PlayButton.css';
 
 type Props = {
+  /**
+   * What to do when the button is clicked.
+   */
   onClick?: () => void,
-  size?: string,
+    /**
+   * Size of the button.
+   */
+  size?: 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive',
+    /**
+   * Custom styling object.
+   */
   style?: any
 };
 
+/**
+ * This component can be used as a toggle for playing media.
+ */
 const PlayButton = (props: Props) => (
   <Button
     className='play-button'

package/types/components/DateInput.js.flow

@@ -5,14 +5,37 @@ import { Icon, Input } from 'semantic-ui-react';
 import './DateInput.css';
 
 type Props = {
+  /**
+   * Display date, which will override the default date formatting.
+   */
   display?: string,
-  formatOptions?: any,
+  /**
+   * An object containing date-time formatting options used by JavaScript Date objects.
+   */
+  formatOptions?: DateTimeFormatOptions,
+  /**
+   * Locale identifier (Unicode CLDR) for formatting dates and times.
+   */
   locale?: string,
+  /**
+   * Callback fired when the date in the input field is changed.
+   */
   onChange: (date: ?Date) => void,
+  /**
+   * Callback fired when the date input field is clicked, typically opening the actual method of
+   * input (such as the <code>DatePicker</code> component).
+   */
   onClick: () => void,
+  /**
+   * Current value of the date input form field, as a JavaScript Date object, or null.
+   */
   value?: ?Date
 }
 
+/**
+ * This input component is used to display and clear a date. It must be used with an additional
+ * component, such as `DatePicker`, to actually input the date.
+ */
 const DateInput = (props: Props) => {
   const formatDate = () => {
     let date = '';

package/types/components/ListLoader.js.flow

@@ -6,9 +6,15 @@ import i18n from '../i18n/i18n';
 import './ListLoader.css';
 
 type Props = {
+  /**
+   * If present, the list loader spinner will display.
+   */
   active: boolean
 };
 
+/**
+ * A loader displays a spinner when active.
+ */
 const ListLoader = (props: Props) => (
   <Dimmer.Dimmable
     as={Segment}

package/types/components/PlayButton.js.flow

@@ -5,11 +5,23 @@ import { Button } from 'semantic-ui-react';
 import './PlayButton.css';
 
 type Props = {
+  /**
+   * What to do when the button is clicked.
+   */
   onClick?: () => void,
-  size?: string,
+    /**
+   * Size of the button.
+   */
+  size?: 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive',
+    /**
+   * Custom styling object.
+   */
   style?: any
 };
 
+/**
+ * This component can be used as a toggle for playing media.
+ */
 const PlayButton = (props: Props) => (
   <Button
     className='play-button'