@ilo-org/react 0.8.4 → 0.8.6

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @ilo-org/react
 
+## 0.8.6
+
+### Patch Changes
+
+- Updated dependencies [ee517d0f2]
+- Updated dependencies [71002bcde]
+- Updated dependencies [703bc66a6]
+- Updated dependencies [ad52c6442]
+- Updated dependencies [9be1cd23e]
+  - @ilo-org/styles@0.10.2
+  - @ilo-org/themes@0.6.0
+
+## 0.8.5
+
+### Patch Changes
+
+- 39ff32a91: Fix appearance of Radio buttons in Firefox
+- bab87cfac: Add min, max and step props to NumberPicker
+- c964d78cc: Adds an `accept` property to the FileUpload component so that it's possible to limit the kinds of files users can upload by file extension.
+- Updated dependencies [c3b0e6def]
+- Updated dependencies [39ff32a91]
+- Updated dependencies [0488bc66e]
+- Updated dependencies [c86fa4f33]
+  - @ilo-org/styles@0.10.1
+  - @ilo-org/themes@0.5.1
+
 ## 0.8.4
 
 ### Patch Changes

package/lib/cjs/components/FileUpload/FileUpload.js

@@ -20,7 +20,7 @@ function formatBytes(bytes, decimals = 2) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
-const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, multiple, name, placeholder, required, }, ref) => {
+const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, multiple, name, placeholder, required, accept, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -38,7 +38,7 @@ const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false,
         }
     };
     const inputId = id ? id : name;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxRuntime.jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsxRuntime.jsx("input", { ref: ref, id: inputId, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", "data-label": placeholder, "aria-describedby": ariaDescribedBy })] })) })), uploadfiles && uploadfiles.length > 0 && (jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: `${file.name} (${formatBytes(file.size)})` }), `${baseClass}--list-item-${i}`))) })))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxRuntime.jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsxRuntime.jsx("input", { ref: ref, id: inputId, name: name, accept: accept, onChange: handleChange, onBlur: onBlur, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", "data-label": placeholder, "aria-describedby": ariaDescribedBy })] })) })), uploadfiles && uploadfiles.length > 0 && (jsxRuntime.jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsxRuntime.jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: `${file.name} (${formatBytes(file.size)})` }), `${baseClass}--list-item-${i}`))) })))] }));
 });
 const LabelledFileUpload = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);

package/lib/cjs/components/NumberPicker/NumberPicker.js

@@ -11,7 +11,7 @@ require('nanoid');
 require('../Tooltip/Tooltip.js');
 require('react-dom');
 
-const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, }, ref) => {
+const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();
     const formControlCtx = components_FormControl_FormControl.useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -26,7 +26,7 @@ const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false
             onChange(e);
         }
     };
-    return (jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy }));
+    return (jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy, max: max, min: min, step: step }));
 });
 const LabelledNumberPicker = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);

package/lib/cjs/components/Radio/Radio.js

@@ -31,11 +31,12 @@ const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error
         }
     };
     const baseClass = `${prefix}--radio`;
+    const controlClass = `${baseClass}--control`;
     const errorClass = `${baseClass}__error`;
     const RadioClasses = classNames(baseClass, {
         [errorClass]: error,
     });
-    return (jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", className: RadioClasses, defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: RadioClasses }, { children: [jsxRuntime.jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }), jsxRuntime.jsx("span", { className: controlClass })] })));
 });
 const LabelledRadio = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);

package/lib/esm/components/FileUpload/FileUpload.js

@@ -18,7 +18,7 @@ function formatBytes(bytes, decimals = 2) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
-const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, multiple, name, placeholder, required, }, ref) => {
+const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, multiple, name, placeholder, required, accept, }, ref) => {
     const { prefix } = useGlobalSettings();
     const formControlCtx = useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -36,7 +36,7 @@ const FileUpload = require$$0.forwardRef(({ onChange, onBlur, disabled = false,
         }
     };
     const inputId = id ? id : name;
-    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsx("input", { ref: ref, id: inputId, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", "data-label": placeholder, "aria-describedby": ariaDescribedBy })] })) })), uploadfiles && uploadfiles.length > 0 && (jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: `${file.name} (${formatBytes(file.size)})` }), `${baseClass}--list-item-${i}`))) })))] }));
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: fileUploadClasses }, { children: jsxs("label", Object.assign({ className: inputClass }, { children: [placeholder, jsx("input", { ref: ref, id: inputId, name: name, accept: accept, onChange: handleChange, onBlur: onBlur, disabled: disabled, multiple: multiple, placeholder: placeholder, required: required, type: "file", "data-label": placeholder, "aria-describedby": ariaDescribedBy })] })) })), uploadfiles && uploadfiles.length > 0 && (jsx("ul", Object.assign({ className: `${baseClass}--list` }, { children: [...uploadfiles].map((file, i) => (jsx("li", Object.assign({ className: `${baseClass}--list-item` }, { children: `${file.name} (${formatBytes(file.size)})` }), `${baseClass}--list-item-${i}`))) })))] }));
 });
 const LabelledFileUpload = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);

package/lib/esm/components/NumberPicker/NumberPicker.js

@@ -9,7 +9,7 @@ import 'nanoid';
 import '../Tooltip/Tooltip.js';
 import 'react-dom';
 
-const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, }, ref) => {
+const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = useGlobalSettings();
     const formControlCtx = useFormControl();
     const { ariaDescribedBy } = formControlCtx;
@@ -24,7 +24,7 @@ const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false
             onChange(e);
         }
     };
-    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy }));
+    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, placeholder: placeholder, required: required, type: "number", className: numberPickerClasses, pattern: "[0-9]*", inputMode: "numeric", "aria-describedby": ariaDescribedBy, max: max, min: min, step: step }));
 });
 const LabelledNumberPicker = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);

package/lib/esm/components/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { __rest } from 'tslib';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import require$$0, { useEffect } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
@@ -29,11 +29,12 @@ const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error
         }
     };
     const baseClass = `${prefix}--radio`;
+    const controlClass = `${baseClass}--control`;
     const errorClass = `${baseClass}__error`;
     const RadioClasses = classNames(baseClass, {
         [errorClass]: error,
     });
-    return (jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", className: RadioClasses, defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }));
+    return (jsxs("div", Object.assign({ className: RadioClasses }, { children: [jsx("input", { ref: ref, id: id ? id : name, name: name, onChange: handleChange, onBlur: onBlur, disabled: disabled, required: required, type: "radio", defaultChecked: defaultChecked, "aria-describedby": ariaDescribedBy, checked: checked, value: value }), jsx("span", { className: controlClass })] })));
 });
 const LabelledRadio = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className, labelPlacement = "end", labelSize = "small" } = props, rest = __rest(props, ["style", "inputStyle", "className", "labelPlacement", "labelSize"]);

package/lib/types/react/src/components/FileUpload/FileUpload.props.d.ts

@@ -5,6 +5,10 @@ export interface FileUploadProps extends FormFieldProps<HTMLInputElement> {
      * The placeholder for the input
      */
     placeholder?: string;
+    /**
+     * The accept attribute for the input
+     */
+    accept?: string;
     /**
      * Can the user upload more than one file?
      */

package/lib/types/react/src/components/NumberPicker/NumberPicker.props.d.ts

@@ -5,5 +5,17 @@ export interface NumberPickerProps extends FormFieldProps<HTMLInputElement> {
      * The placeholder text when the input is empty.
      */
     placeholder?: string;
+    /**
+     * The minimum value of the input.
+     */
+    min?: number;
+    /**
+     * The maximum value of the input.
+     * */
+    max?: number;
+    /**
+     * The step value of the input.
+     * */
+    step?: number;
 }
 export type LabelledNumberPickerProps = LabelledFormFieldProps<NumberPickerProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -76,8 +76,8 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.10.0",
-    "@ilo-org/themes": "0.5.0",
+    "@ilo-org/styles": "0.10.2",
+    "@ilo-org/themes": "0.6.0",
     "@ilo-org/utils": "0.0.11"
   },
   "devDependencies": {

package/src/components/FileUpload/FileUpload.props.ts

@@ -7,6 +7,11 @@ export interface FileUploadProps extends FormFieldProps<HTMLInputElement> {
    */
   placeholder?: string;
 
+  /**
+   * The accept attribute for the input
+   */
+  accept?: string;
+
   /**
    * Can the user upload more than one file?
    */

package/src/components/FileUpload/FileUpload.tsx

@@ -15,6 +15,7 @@ function formatBytes(bytes: number, decimals = 2) {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
+
 const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
   (
     {
@@ -27,6 +28,7 @@ const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
       name,
       placeholder,
       required,
+      accept,
     },
     ref
   ) => {
@@ -62,6 +64,7 @@ const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
               ref={ref}
               id={inputId}
               name={name}
+              accept={accept}
               onChange={handleChange}
               onBlur={onBlur}
               disabled={disabled}

package/src/components/NumberPicker/NumberPicker.props.ts

@@ -5,6 +5,21 @@ export interface NumberPickerProps extends FormFieldProps<HTMLInputElement> {
    * The placeholder text when the input is empty.
    */
   placeholder?: string;
+
+  /**
+   * The minimum value of the input.
+   */
+  min?: number;
+
+  /**
+   * The maximum value of the input.
+   * */
+  max?: number;
+
+  /**
+   * The step value of the input.
+   * */
+  step?: number;
 }
 
 export type LabelledNumberPickerProps =

package/src/components/NumberPicker/NumberPicker.tsx

@@ -18,6 +18,9 @@ const NumberPicker = React.forwardRef<HTMLInputElement, NumberPickerProps>(
       name,
       placeholder,
       required,
+      max,
+      min,
+      step,
     },
     ref
   ) => {
@@ -55,6 +58,9 @@ const NumberPicker = React.forwardRef<HTMLInputElement, NumberPickerProps>(
         pattern="[0-9]*"
         inputMode="numeric"
         aria-describedby={ariaDescribedBy}
+        max={max}
+        min={min}
+        step={step}
       />
     );
   }

package/src/components/Radio/Radio.tsx

@@ -43,6 +43,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     };
 
     const baseClass = `${prefix}--radio`;
+    const controlClass = `${baseClass}--control`;
     const errorClass = `${baseClass}__error`;
 
     const RadioClasses = classNames(baseClass, {
@@ -50,21 +51,23 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
     });
 
     return (
-      <input
-        ref={ref}
-        id={id ? id : name}
-        name={name}
-        onChange={handleChange}
-        onBlur={onBlur}
-        disabled={disabled}
-        required={required}
-        type="radio"
-        className={RadioClasses}
-        defaultChecked={defaultChecked}
-        aria-describedby={ariaDescribedBy}
-        checked={checked}
-        value={value}
-      />
+      <div className={RadioClasses}>
+        <input
+          ref={ref}
+          id={id ? id : name}
+          name={name}
+          onChange={handleChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          required={required}
+          type="radio"
+          defaultChecked={defaultChecked}
+          aria-describedby={ariaDescribedBy}
+          checked={checked}
+          value={value}
+        />
+        <span className={controlClass}></span>
+      </div>
     );
   }
 );