@linzjs/lui 17.34.0 → 17.35.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [17.35.1](https://github.com/linz/lui/compare/v17.35.0...v17.35.1) (2023-02-15)
+
+
+### Bug Fixes
+
+* Adds event handler to LuiTab ([73f0cfb](https://github.com/linz/lui/commit/73f0cfba18f6a60f50238eef2548bddf236f9030))
+
+# [17.35.0](https://github.com/linz/lui/compare/v17.34.0...v17.35.0) (2023-02-14)
+
+
+### Features
+
+* **LuiDateInput:** Add date picker ([#814](https://github.com/linz/lui/issues/814)) ([a0411b1](https://github.com/linz/lui/commit/a0411b1bd741e0f419047e011b3593ce5b166253))
+
 # [17.34.0](https://github.com/linz/lui/compare/v17.33.2...v17.34.0) (2023-02-14)
 
 ## [17.33.2](https://github.com/linz/lui/compare/v17.33.1...v17.33.2) (2023-02-10)

package/dist/components/LuiFormElements/LuiDateInput/DateInput.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare type Input = JSX.IntrinsicElements['input'];
+declare type Props = Omit<Input, 'pattern' | 'type' | 'placeholder'>;
+export declare const DateInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLInputElement>>;
+export default DateInput;

package/dist/components/LuiFormElements/LuiDateInput/DateInputHelper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type ParseOptions = {
+    allowTwoDigitYear?: boolean;
+};
+export declare const parseTextDate: (value: JSX.IntrinsicElements['input']['value'], options?: ParseOptions) => string | undefined;
+export {};

package/dist/components/LuiFormElements/LuiDateInput/LuiDateInput.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LuiTextInput } from '../LuiTextInput/LuiTextInput';
+declare type Props = Omit<Parameters<typeof LuiTextInput>[0], 'as'>;
+export declare const LuiDateInput: ({ inputProps, ...rest }: Props) => JSX.Element;
+export {};

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, DetailedHTMLProps, InputHTMLAttributes } from 'react';
 export interface LuiTextInputProps {
     onChange?: ChangeEventHandler<HTMLInputElement>;
-    inputProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    inputProps?: Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'ref'>;
     error?: string;
     warning?: string;
     hideLabel?: boolean;

package/dist/components/LuiTabs/LuiTab/LuiTab.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface LuiTabProps {
-    onClick: () => void;
+    onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
     active: boolean;
     id: string;
     ariaControls: string;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { LuiFileInputBox } from './components/LuiFormElements/LuiFileInputBox/Lu
 export { LuiSelectInput } from './components/LuiFormElements/LuiSelectInput/LuiSelectInput';
 export { LuiTextAreaInput } from './components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput';
 export { LuiTextInput } from './components/LuiFormElements/LuiTextInput/LuiTextInput';
+export { LuiDateInput } from './components/LuiFormElements/LuiDateInput/LuiDateInput';
 export { LuiRadioInput } from './components/LuiFormElements/LuiRadioInput/LuiRadioInput';
 export { LuiFormikCheckbox } from './components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox';
 export { LuiFormikTextInput } from './components/LuiFormikForms/LuiFormikTextInput/LuiFormikTextInput';

package/dist/index.js

@@ -11933,9 +11933,9 @@ function identifier$1(index) {
   return slice$1(index, position$1);
 }
 function compile$1(value) {
-  return dealloc$1(parse$3("", null, null, null, [""], value = alloc$1(value), 0, [0], value));
+  return dealloc$1(parse$4("", null, null, null, [""], value = alloc$1(value), 0, [0], value));
 }
-function parse$3(value, root2, parent2, rule, rules, rulesets, pseudo, points, declarations) {
+function parse$4(value, root2, parent2, rule, rules, rulesets, pseudo, points, declarations) {
   var index = 0;
   var offset = 0;
   var length2 = pseudo;
@@ -12002,16 +12002,16 @@ function parse$3(value, root2, parent2, rule, rules, rulesets, pseudo, points, d
             append$1(reference = ruleset$1(characters2, root2, parent2, index, offset, rules, points, type, props = [], children = [], length2), rulesets);
             if (character2 === 123)
               if (offset === 0)
-                parse$3(characters2, root2, reference, reference, props, rulesets, length2, points, children);
+                parse$4(characters2, root2, reference, reference, props, rulesets, length2, points, children);
               else
                 switch (atrule) {
                   case 100:
                   case 109:
                   case 115:
-                    parse$3(value, reference, reference, rule && append$1(ruleset$1(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
+                    parse$4(value, reference, reference, rule && append$1(ruleset$1(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2), children), rules, children, length2, points, rule ? props : children);
                     break;
                   default:
-                    parse$3(characters2, reference, reference, reference, [""], children, 0, points, children);
+                    parse$4(characters2, reference, reference, reference, [""], children, 0, points, children);
                 }
         }
         index = offset = property2 = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
@@ -14255,7 +14255,7 @@ var parseValue = function (value) {
     return null
 };
 
-var parse$2 = function (rule) { return rule.split(' ').map(parseValue); };
+var parse$3 = function (rule) { return rule.split(' ').map(parseValue); };
 
 var getSizeAtTrack = function (index, tracks, gap, end) {
     if ( gap === void 0 ) { gap = 0; }
@@ -14476,12 +14476,12 @@ Gutter.prototype.getRawComputedGap = function getRawComputedGap () {
 
 Gutter.prototype.setTracks = function setTracks (raw) {
     this.tracks = raw.split(' ');
-    this.trackValues = parse$2(raw);
+    this.trackValues = parse$3(raw);
 };
 
 Gutter.prototype.setComputedTracks = function setComputedTracks (raw) {
     this.computedTracks = raw.split(' ');
-    this.computedPixels = parse$2(raw);
+    this.computedPixels = parse$3(raw);
 };
 
 Gutter.prototype.setGap = function setGap (raw) {
@@ -15570,20 +15570,110 @@ function v4(options, buf, offset) {
   return stringify$1(rnds);
 }
 
+var mapFromDigits = function (value) {
+    var trimmed = value.split(' ').join();
+    var hasEightChars = trimmed.length === 8;
+    var isNumber = !isNaN(Number(trimmed));
+    if (isNumber && hasEightChars) {
+        return "".concat(trimmed.slice(0, 2), "/").concat(trimmed.slice(2, 4), "/").concat(trimmed.slice(4));
+    }
+    return value;
+};
+var mapFromValidFormat = function (value) {
+    // Valid format refers to yyyy-mm-dd
+    var validDate = value.slice(0, 10);
+    if (validDate.length !== 10) {
+        return value;
+    }
+    var elements = validDate.split('-');
+    if (elements.length !== 3) {
+        return value;
+    }
+    var yyyy = elements[0], mm = elements[1], dd = elements[2];
+    var isDay = dd.length === 2 && !isNaN(Number(dd));
+    var isMonth = mm.length === 2 && !isNaN(Number(mm));
+    var isYear = yyyy.length === 4 && !isNaN(Number(yyyy));
+    if (isDay && isMonth && isYear) {
+        return "".concat(dd, "/").concat(mm, "/").concat(yyyy);
+    }
+    return value;
+};
+var parse$2 = function (value, options) {
+    value = mapFromDigits(value);
+    value = mapFromValidFormat(value);
+    var arr = value
+        .split(/-|\//)
+        .filter(Boolean)
+        .map(function (val) { return Number(val); });
+    if (arr.length !== 3) {
+        return;
+    }
+    if (arr.some(function (val) { return isNaN(val); })) {
+        return;
+    }
+    var dd = arr[0], mm = arr[1], yyyy = arr[2];
+    if (String(yyyy).length !== 4) {
+        if (yyyy <= 99 && (options === null || options === void 0 ? void 0 : options.allowTwoDigitYear)) {
+            return parse$2("".concat(dd, "/").concat(mm, "/20").concat(yyyy.toString().padStart(2, '0')));
+        }
+        return;
+    }
+    var day = String(dd).padStart(2, '0');
+    var month = String(mm).padStart(2, '0');
+    var year = String(yyyy);
+    var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
+    if (date.toString() === 'Invalid Date') {
+        return;
+    }
+    var result = date.toISOString().split('T')[0];
+    var _a = result.split('-'), convertedYear = _a[0], convertedMonth = _a[1], convertedDay = _a[2];
+    var isDayMatch = convertedDay === day;
+    var isMonthMatch = convertedMonth === month;
+    var isYearMatch = convertedYear === year;
+    var isValidDate = [isDayMatch, isMonthMatch, isYearMatch].every(Boolean);
+    return isValidDate ? result : undefined;
+};
+var parseTextDate = function (value, options) {
+    if (!value || typeof value !== 'string') {
+        return;
+    }
+    try {
+        return parse$2(value, options);
+    }
+    catch (_a) {
+        return;
+    }
+};
+
+var DateInput = React$1.forwardRef(function (props, ref) {
+    var valueProp = props.value, onChangeProp = props.onChange, onPasteProp = props.onPaste, inputProps = __rest$1(props, ["value", "onChange", "onPaste"]);
+    var value = parseTextDate(valueProp);
+    return (React__default["default"].createElement("input", __assign$3({}, inputProps, { ref: ref, pattern: "d{2}/d{2}/d{4}", placeholder: "dd/mm/yyyy", type: 'date', value: value, onChange: function (e) { return onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e); }, onPaste: function (e) {
+            var data = e.clipboardData.getData('text');
+            var parsedValue = parseTextDate(data, { allowTwoDigitYear: true });
+            if (parsedValue) {
+                e.currentTarget.value = parsedValue;
+            }
+            onPasteProp === null || onPasteProp === void 0 ? void 0 : onPasteProp(e);
+        } })));
+});
+
 function useGenerateOrDefaultId(idFromProps) {
     var id = React$1.useState(idFromProps ? idFromProps : v4())[0];
     return id;
 }
+var BareInput = function (props) { return (React__default["default"].createElement("input", __assign$3({}, props))); };
 var LuiTextInput = function (props) {
-    var _a;
+    var _a, _b, _c;
     var id = useGenerateOrDefaultId((_a = props.inputProps) === null || _a === void 0 ? void 0 : _a.id);
+    var LuiInput = ((_b = props.inputProps) === null || _b === void 0 ? void 0 : _b.type) === 'date' ? DateInput : BareInput;
     return (React__default["default"].createElement("div", { className: clsx$1('LuiTextInput', props.error && 'hasError', props.warning && 'hasWarning', props.className) },
         React__default["default"].createElement("label", { className: 'LuiTextInput-label', htmlFor: id },
             props.mandatory && React__default["default"].createElement("span", { className: "LuiTextInput-mandatory" }, "*"),
             React__default["default"].createElement("span", { className: 'LuiTextInput-label-text ' +
                     clsx$1(props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
             React__default["default"].createElement("span", { className: "LuiTextInput-inputWrapper" },
-                React__default["default"].createElement("input", __assign$3({ type: 'text', className: clsx$1('LuiTextInput-input', props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '', props.size ? "LuiTextInput-".concat(props.size) : ''), min: "0", value: props.value, onChange: props.onChange }, props.inputProps, { id: id })),
+                React__default["default"].createElement(LuiInput, __assign$3({ className: clsx$1('LuiTextInput-input', props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '', props.size ? "LuiTextInput-".concat(props.size) : ''), min: ((_c = props.inputProps) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? undefined : '0', value: props.value, onChange: props.onChange }, props.inputProps, { id: id })),
                 props.icon),
             props.error && (React__default["default"].createElement("span", { className: "LuiTextInput-error" },
                 React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
@@ -15729,6 +15819,12 @@ var LuiTextAreaInput = function (props) {
             props.error))));
 };
 
+var LuiDateInput = function (_a) {
+    var inputProps = _a.inputProps, rest = __rest$1(_a, ["inputProps"]);
+    var mapped = __assign$3({ inputProps: __assign$3(__assign$3({}, inputProps), { type: 'date' }) }, rest);
+    return React__default["default"].createElement(LuiTextInput, __assign$3({}, mapped));
+};
+
 // @NOTE Can use LuiRadioInput in block form and pass through your own legend (label)
 var LuiRadioInput = function (props) {
     var _a;
@@ -58458,6 +58554,7 @@ exports.LuiCloseableHeaderMenuItem = LuiCloseableHeaderMenuItem;
 exports.LuiCloseableHeaderMenuItemV2 = LuiCloseableHeaderMenuItemV2;
 exports.LuiComboSelect = LuiComboSelect;
 exports.LuiControlledMenu = LuiControlledMenu;
+exports.LuiDateInput = LuiDateInput;
 exports.LuiDrawerMenu = LuiDrawerMenu;
 exports.LuiDrawerMenuDivider = LuiDrawerMenuDivider;
 exports.LuiDrawerMenuDividerV2 = LuiDrawerMenuDividerV2;