@mackin.com/styleguide 8.0.0-beta.6 → 8.0.0-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.ts +49 -59
- package/index.js +451 -235
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -72,7 +72,7 @@ interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes
|
|
|
72
72
|
iconBlock?: boolean;
|
|
73
73
|
small?: boolean;
|
|
74
74
|
/** The button will not respond to click or mouse events, but it will appear normal. */
|
|
75
|
-
|
|
75
|
+
readOnly?: boolean;
|
|
76
76
|
waiting?: boolean;
|
|
77
77
|
/** The minimum button size will be set to the themes' formButtonMinWidth. */
|
|
78
78
|
enforceMinWidth?: boolean;
|
|
@@ -111,7 +111,7 @@ declare const Calendar: (p: CalendarProps) => JSX.Element;
|
|
|
111
111
|
interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'checked' | 'onChange' | 'type'> {
|
|
112
112
|
checked: boolean;
|
|
113
113
|
onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
114
|
-
|
|
114
|
+
readOnly?: boolean;
|
|
115
115
|
label?: string;
|
|
116
116
|
checkedIcon?: string;
|
|
117
117
|
uncheckedIcon?: string;
|
|
@@ -144,31 +144,6 @@ interface CopyButtonProps {
|
|
|
144
144
|
}
|
|
145
145
|
declare const CopyButton: (props: CopyButtonProps) => JSX.Element;
|
|
146
146
|
|
|
147
|
-
interface DatePickerProps {
|
|
148
|
-
value: number | undefined;
|
|
149
|
-
/** Called with debounce when the input changes. */
|
|
150
|
-
onChange: (value: number | undefined) => void;
|
|
151
|
-
style?: React.CSSProperties;
|
|
152
|
-
/** Defaults to MM/DD/YYYY. */
|
|
153
|
-
placeholder?: string;
|
|
154
|
-
id?: string;
|
|
155
|
-
disabled?: boolean;
|
|
156
|
-
className?: string;
|
|
157
|
-
inputClassName?: string;
|
|
158
|
-
readOnly?: boolean;
|
|
159
|
-
required?: boolean;
|
|
160
|
-
/** Defaults to 250ms */
|
|
161
|
-
debounceMs?: number;
|
|
162
|
-
round?: boolean;
|
|
163
|
-
/** This is the ms from Date.valueOf(). */
|
|
164
|
-
min?: number;
|
|
165
|
-
/** This is the ms from Date.valueOf(). */
|
|
166
|
-
max?: number;
|
|
167
|
-
/** Whether to move the popover on collision with the parent's bounds. Default is true. */
|
|
168
|
-
reposition?: boolean;
|
|
169
|
-
}
|
|
170
|
-
declare const DatePicker: (p: DatePickerProps) => JSX.Element;
|
|
171
|
-
|
|
172
147
|
declare const Divider: () => JSX.Element;
|
|
173
148
|
|
|
174
149
|
declare const ErrorModal: (props: {
|
|
@@ -289,6 +264,36 @@ interface InfoTipProps {
|
|
|
289
264
|
}
|
|
290
265
|
declare const InfoTip: (props: InfoTipProps) => JSX.Element;
|
|
291
266
|
|
|
267
|
+
interface BaseInputProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
268
|
+
rightControl?: JSX.Element;
|
|
269
|
+
round?: boolean;
|
|
270
|
+
/** The class applied to the wrapping element without this component. Use 'className' to style the input directly. */
|
|
271
|
+
wrapperClassName?: string;
|
|
272
|
+
/** An error message to display below the input. */
|
|
273
|
+
error?: string;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
interface ValidationMessageProps {
|
|
277
|
+
/** Will mark the input as invalid and show this as the validation failed message. */
|
|
278
|
+
customError?: string;
|
|
279
|
+
/** If 'pattern' is present, this message will be displayed as the validation failed message. */
|
|
280
|
+
patternErrorMessage?: string;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
declare type BaseProps$2 = Omit<BaseInputProps, 'type' | 'value' | 'min' | 'max' | 'step' | 'pattern' | 'maxLength' | 'rightControl' | 'ref'> & Omit<ValidationMessageProps, 'pattern'>;
|
|
284
|
+
interface DateInputProps extends BaseProps$2 {
|
|
285
|
+
/** The epoch timestamp. Equivalent to Date.valueOf(). */
|
|
286
|
+
value?: number;
|
|
287
|
+
/** The min epoch timestamp. */
|
|
288
|
+
min?: number;
|
|
289
|
+
/** The max epoch timestamp. */
|
|
290
|
+
max?: number;
|
|
291
|
+
/** Whether to move the popover on collision with the parent's bounds. Default is true. */
|
|
292
|
+
reposition?: boolean;
|
|
293
|
+
onValueChange: (value: number | undefined) => void;
|
|
294
|
+
}
|
|
295
|
+
declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
296
|
+
|
|
292
297
|
declare type InputValue = string | number | undefined;
|
|
293
298
|
declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password' | 'url' | 'email';
|
|
294
299
|
interface InputProps {
|
|
@@ -333,37 +338,24 @@ interface InputProps {
|
|
|
333
338
|
/** @deprecated Use DateInput, NumberInput, or TextInput instead. */
|
|
334
339
|
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
|
|
335
340
|
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
round?: boolean;
|
|
339
|
-
/** The class applied to the wrapping element without this component. Use 'className' to style the input directly. */
|
|
340
|
-
wrapperClassName?: string;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
interface NumberInputProps extends Omit<BaseInputProps, 'type' | 'value' | 'onChange' | 'onBlur' | 'min' | 'max' | 'step' | 'maxLength'> {
|
|
341
|
+
declare type BaseProps$1 = Omit<BaseInputProps, 'type' | 'value' | 'min' | 'max' | 'step' | 'maxLength' | 'error' | 'pattern'> & Omit<ValidationMessageProps, 'pattern'>;
|
|
342
|
+
interface NumberInputProps extends BaseProps$1 {
|
|
344
343
|
value?: number;
|
|
345
344
|
min?: number;
|
|
346
345
|
max?: number;
|
|
347
346
|
step?: number;
|
|
348
|
-
|
|
349
|
-
customValidityChecks?: ((value: number | undefined) => string | undefined)[];
|
|
350
|
-
/** Will try to fix any validity errors onBlur (min, max, step, etc). If it cannot, the value will be cleared. Requires the onBlur callback to be passed in. Defaults to 'true'. */
|
|
351
|
-
constrainOnBlur?: boolean;
|
|
352
|
-
onChange?: (value: number | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
353
|
-
onBlur?: (value: number | undefined, event: React.FocusEvent<HTMLInputElement>) => void;
|
|
347
|
+
onValueChange: (value: number | undefined) => void;
|
|
354
348
|
}
|
|
355
|
-
declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "
|
|
349
|
+
declare const NumberInput: React.ForwardRefExoticComponent<Pick<NumberInputProps, "value" | "min" | "max" | "step" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "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" | "customError" | "patternErrorMessage" | "onValueChange"> & React.RefAttributes<HTMLInputElement>>;
|
|
356
350
|
|
|
357
|
-
|
|
351
|
+
declare type BaseProps = Omit<BaseInputProps, 'type' | 'value' | 'max' | 'min' | 'step' | 'error'> & ValidationMessageProps;
|
|
352
|
+
interface TextInputProps extends BaseProps {
|
|
358
353
|
value?: string;
|
|
359
354
|
/** Defaults to 'text'. */
|
|
360
355
|
type?: 'text' | 'email' | 'url' | 'password';
|
|
361
|
-
|
|
362
|
-
customValidityChecks?: ((value: string | undefined) => string | undefined)[];
|
|
363
|
-
onChange?: (value: string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
364
|
-
onBlur?: (value: string | undefined, event: React.FocusEvent<HTMLInputElement>) => void;
|
|
356
|
+
onValueChange: (value: string | undefined) => void;
|
|
365
357
|
}
|
|
366
|
-
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "
|
|
358
|
+
declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "value" | "rightControl" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "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" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
|
|
367
359
|
|
|
368
360
|
interface LabelProps {
|
|
369
361
|
text: string | JSX.Element;
|
|
@@ -629,8 +621,10 @@ interface PickerProps<T extends PickerValue> extends SelectProps {
|
|
|
629
621
|
name?: string;
|
|
630
622
|
})[];
|
|
631
623
|
onChange: (value: T, event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
632
|
-
|
|
624
|
+
readOnly?: boolean;
|
|
633
625
|
round?: boolean;
|
|
626
|
+
/** If true, bottom padding will be added to account for other inputs having space for error messages. */
|
|
627
|
+
controlAlign?: boolean;
|
|
634
628
|
}
|
|
635
629
|
declare const Picker: <T extends PickerValue>(props: PickerProps<T>) => JSX.Element;
|
|
636
630
|
|
|
@@ -756,6 +750,7 @@ interface MackinTheme {
|
|
|
756
750
|
dividerMargin: string;
|
|
757
751
|
dividerBorder: string;
|
|
758
752
|
headerBoxShadow: string;
|
|
753
|
+
inputErrorMinHeight: string;
|
|
759
754
|
};
|
|
760
755
|
zIndexes: {
|
|
761
756
|
header: number;
|
|
@@ -897,14 +892,11 @@ declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
|
|
|
897
892
|
className: string;
|
|
898
893
|
}, HTMLElement>;
|
|
899
894
|
|
|
900
|
-
interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'
|
|
895
|
+
interface TextAreaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'value'> {
|
|
901
896
|
value?: string;
|
|
902
|
-
|
|
903
|
-
customValidityChecks?: ((value: string | undefined) => string | undefined)[];
|
|
904
|
-
onChange?: (value: string | undefined, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
905
|
-
onBlur?: (value: string | undefined, event: React.FocusEvent<HTMLTextAreaElement>) => void;
|
|
897
|
+
onValueChange: (value: string | undefined) => void;
|
|
906
898
|
}
|
|
907
|
-
declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "
|
|
899
|
+
declare const TextArea: React.ForwardRefExoticComponent<Pick<TextAreaProps, "value" | "key" | "autoComplete" | "autoFocus" | "cols" | "dirName" | "disabled" | "form" | "maxLength" | "minLength" | "name" | "placeholder" | "readOnly" | "required" | "rows" | "wrap" | "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" | "onValueChange"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
908
900
|
|
|
909
901
|
declare type ToggleButtonVariant = 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
|
|
910
902
|
interface ToggleButtonProps {
|
|
@@ -945,9 +937,7 @@ interface ToggleButtonGroupProps {
|
|
|
945
937
|
}
|
|
946
938
|
declare const ToggleButtonGroup: (props: ToggleButtonGroupProps) => JSX.Element;
|
|
947
939
|
|
|
948
|
-
|
|
949
|
-
}
|
|
950
|
-
declare const TogglePasswordInput: (p: TogglePasswordInputProps) => JSX.Element;
|
|
940
|
+
declare const TogglePasswordInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "type" | "rightControl" | "value" | "round" | "wrapperClassName" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "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" | "onValueChange" | "customError" | "patternErrorMessage"> & React.RefAttributes<HTMLInputElement>>;
|
|
951
941
|
|
|
952
942
|
declare const WaitingIndicator: (p: {
|
|
953
943
|
show: boolean;
|
|
@@ -956,4 +946,4 @@ declare const WaitingIndicator: (p: {
|
|
|
956
946
|
debug?: boolean;
|
|
957
947
|
}) => JSX.Element;
|
|
958
948
|
|
|
959
|
-
export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton,
|
|
949
|
+
export { Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, useMediaQuery, useThemeSafely };
|
package/index.js
CHANGED
|
@@ -47,6 +47,7 @@ const calcDynamicThemeProps = (theme) => {
|
|
|
47
47
|
theme.controls.focusOutlineShadow = `0px 0px 4px 2px ${theme.colors.focusOutline}`;
|
|
48
48
|
theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
|
|
49
49
|
theme.controls.dividerBorder = `2px solid ${theme.colors.divider}`;
|
|
50
|
+
theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
|
|
50
51
|
};
|
|
51
52
|
const defaultTheme = {
|
|
52
53
|
colors: {
|
|
@@ -115,7 +116,8 @@ const defaultTheme = {
|
|
|
115
116
|
gap: '1rem',
|
|
116
117
|
dividerMargin: '1rem',
|
|
117
118
|
dividerBorder: '',
|
|
118
|
-
headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)'
|
|
119
|
+
headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
|
|
120
|
+
inputErrorMinHeight: ''
|
|
119
121
|
},
|
|
120
122
|
zIndexes: {
|
|
121
123
|
header: 50,
|
|
@@ -339,7 +341,7 @@ const Icon = (props) => {
|
|
|
339
341
|
|
|
340
342
|
const Button = (props) => {
|
|
341
343
|
var _a, _b;
|
|
342
|
-
const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "
|
|
344
|
+
const nativeProps = __rest(props, ["variant", "textAlign", "block", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth"]);
|
|
343
345
|
const theme = useThemeSafely();
|
|
344
346
|
const buttonStyles = css.css `
|
|
345
347
|
padding-left: ${theme.controls.padding};
|
|
@@ -475,7 +477,7 @@ const Button = (props) => {
|
|
|
475
477
|
${props.enforceMinWidth && `
|
|
476
478
|
min-width: ${theme.controls.formButtonMinWidth};
|
|
477
479
|
`}
|
|
478
|
-
${props.
|
|
480
|
+
${props.readOnly && `
|
|
479
481
|
cursor: default;
|
|
480
482
|
box-shadow: none;
|
|
481
483
|
pointer-events:none;
|
|
@@ -868,7 +870,7 @@ const getAutocompleteValueId = (v) => {
|
|
|
868
870
|
}
|
|
869
871
|
return v.id;
|
|
870
872
|
};
|
|
871
|
-
//TB: will need to use the new input
|
|
873
|
+
//TB: FUTURE will need to use the new input
|
|
872
874
|
const Autocomplete = (p) => {
|
|
873
875
|
var _a;
|
|
874
876
|
const element = React__namespace.useRef(null);
|
|
@@ -1217,7 +1219,7 @@ const Calendar = (p) => {
|
|
|
1217
1219
|
};
|
|
1218
1220
|
|
|
1219
1221
|
const Checkbox = (props) => {
|
|
1220
|
-
const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "
|
|
1222
|
+
const inputProps = __rest(props, ["checked", "onChange", "label", "checkedIcon", "uncheckedIcon", "checkedThemeColor", "checkedColor", "readOnly"]);
|
|
1221
1223
|
const selected = props.checkedIcon || 'selected';
|
|
1222
1224
|
const unselected = props.uncheckedIcon || 'unselected';
|
|
1223
1225
|
const theme = useThemeSafely();
|
|
@@ -1232,7 +1234,7 @@ const Checkbox = (props) => {
|
|
|
1232
1234
|
}
|
|
1233
1235
|
const checkboxStyles = css.css `
|
|
1234
1236
|
display: inline-block;
|
|
1235
|
-
${!props.disabled && !props.
|
|
1237
|
+
${!props.disabled && !props.readOnly && `
|
|
1236
1238
|
&:hover {
|
|
1237
1239
|
filter: ${theme.controls.hoverBrightness};
|
|
1238
1240
|
}
|
|
@@ -1246,7 +1248,7 @@ const Checkbox = (props) => {
|
|
|
1246
1248
|
${props.disabled && `
|
|
1247
1249
|
cursor: not-allowed;
|
|
1248
1250
|
`}
|
|
1249
|
-
${props.
|
|
1251
|
+
${props.readOnly && `
|
|
1250
1252
|
cursor: default;
|
|
1251
1253
|
`}
|
|
1252
1254
|
`;
|
|
@@ -1258,7 +1260,7 @@ const Checkbox = (props) => {
|
|
|
1258
1260
|
width: 0;
|
|
1259
1261
|
opacity: 0;
|
|
1260
1262
|
|
|
1261
|
-
${!props.
|
|
1263
|
+
${!props.readOnly && `
|
|
1262
1264
|
&:focus + .checkboxIcon {
|
|
1263
1265
|
box-shadow: ${theme.controls.focusOutlineShadow};
|
|
1264
1266
|
}
|
|
@@ -1272,7 +1274,7 @@ const Checkbox = (props) => {
|
|
|
1272
1274
|
background-color: ${theme.colors.disabled};
|
|
1273
1275
|
cursor: not-allowed;
|
|
1274
1276
|
`}
|
|
1275
|
-
${props.
|
|
1277
|
+
${props.readOnly && `
|
|
1276
1278
|
cursor: default;
|
|
1277
1279
|
`}
|
|
1278
1280
|
${props.checked && `
|
|
@@ -1281,8 +1283,8 @@ const Checkbox = (props) => {
|
|
|
1281
1283
|
`;
|
|
1282
1284
|
return (React__namespace.createElement("span", { className: css.cx('checkbox', checkboxStyles, props.className) },
|
|
1283
1285
|
React__namespace.createElement("label", { className: labelStyles },
|
|
1284
|
-
React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.
|
|
1285
|
-
if (props.
|
|
1286
|
+
React__namespace.createElement("input", Object.assign({}, inputProps, { tabIndex: props.readOnly ? -1 : undefined, className: nativeCheckboxStyles, type: "checkbox", onChange: e => {
|
|
1287
|
+
if (props.readOnly) {
|
|
1286
1288
|
e.preventDefault();
|
|
1287
1289
|
return;
|
|
1288
1290
|
}
|
|
@@ -1489,93 +1491,6 @@ const CopyButton = (props) => {
|
|
|
1489
1491
|
React__namespace.createElement(Icon, { id: copied ? 'paste' : 'copy' })));
|
|
1490
1492
|
};
|
|
1491
1493
|
|
|
1492
|
-
const Popover = (p) => {
|
|
1493
|
-
var _a, _b;
|
|
1494
|
-
const theme = useThemeSafely();
|
|
1495
|
-
const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
|
|
1496
|
-
return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
|
|
1497
|
-
zIndex: theme.zIndexes.tooltip
|
|
1498
|
-
}), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
|
|
1499
|
-
var _a, _b, _c, _d;
|
|
1500
|
-
return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
|
|
1501
|
-
React__namespace.createElement(TabLocker, null,
|
|
1502
|
-
React__namespace.createElement("div", { className: css.css({
|
|
1503
|
-
border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
|
|
1504
|
-
borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
|
|
1505
|
-
boxShadow: theme.controls.boxShadow,
|
|
1506
|
-
backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
|
|
1507
|
-
}) }, p.content))));
|
|
1508
|
-
} },
|
|
1509
|
-
React__namespace.createElement("span", null, p.parent)));
|
|
1510
|
-
};
|
|
1511
|
-
|
|
1512
|
-
const getCalendarDate = (date, min, max) => {
|
|
1513
|
-
let calendarDate = date ? new Date(date) : new Date();
|
|
1514
|
-
// if there is a min/max we don't want the calendar to open to the current date if it's out of range
|
|
1515
|
-
if (min && dateFns.isBefore(calendarDate, min)) {
|
|
1516
|
-
calendarDate = new Date(min);
|
|
1517
|
-
}
|
|
1518
|
-
else if (max && dateFns.isAfter(calendarDate, max)) {
|
|
1519
|
-
calendarDate = new Date(max);
|
|
1520
|
-
}
|
|
1521
|
-
return calendarDate;
|
|
1522
|
-
};
|
|
1523
|
-
const DatePicker = (p) => {
|
|
1524
|
-
const [showCalendar, setShowCalendar] = React__namespace.useState(false);
|
|
1525
|
-
const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(p.value, p.min, p.max));
|
|
1526
|
-
// controls the one-time focus set on show
|
|
1527
|
-
const needsFocus = React__namespace.useRef(false);
|
|
1528
|
-
const popover = React__namespace.useRef(null);
|
|
1529
|
-
React__namespace.useEffect(() => {
|
|
1530
|
-
var _a;
|
|
1531
|
-
setCalendarDate(getCalendarDate((_a = p.value) !== null && _a !== void 0 ? _a : 0, p.min, p.max));
|
|
1532
|
-
}, [p.value]);
|
|
1533
|
-
React__namespace.useLayoutEffect(() => {
|
|
1534
|
-
var _a, _b;
|
|
1535
|
-
if (needsFocus.current) {
|
|
1536
|
-
(_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
1537
|
-
needsFocus.current = false;
|
|
1538
|
-
}
|
|
1539
|
-
});
|
|
1540
|
-
//TB: replace with new inputs
|
|
1541
|
-
return (React__namespace.createElement(Popover, { reposition: p.reposition, isOpen: showCalendar, onClickOutside: () => {
|
|
1542
|
-
needsFocus.current = false;
|
|
1543
|
-
setShowCalendar(false);
|
|
1544
|
-
}, parent: (React__namespace.createElement(Input, Object.assign({ onFocus: () => {
|
|
1545
|
-
needsFocus.current = false;
|
|
1546
|
-
setShowCalendar(false);
|
|
1547
|
-
}, placeholder: 'MM/DD/YYYY' }, p, { type: "date", rightControl: !p.readOnly ? (React__namespace.createElement(Button, { variant: "icon", readonly: p.readOnly, disabled: p.disabled, small: true, style: {
|
|
1548
|
-
fontSize: '1rem'
|
|
1549
|
-
}, onClick: () => {
|
|
1550
|
-
needsFocus.current = !showCalendar;
|
|
1551
|
-
setShowCalendar(!showCalendar);
|
|
1552
|
-
} },
|
|
1553
|
-
React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: v => {
|
|
1554
|
-
p.onChange(v);
|
|
1555
|
-
} }))), content: (React__namespace.createElement("div", { ref: popover, className: css.css({
|
|
1556
|
-
paddingLeft: '1rem',
|
|
1557
|
-
paddingRight: '1rem',
|
|
1558
|
-
paddingBottom: '1rem'
|
|
1559
|
-
}) },
|
|
1560
|
-
React__namespace.createElement(Calendar, { onClick: date => {
|
|
1561
|
-
p.onChange(date.valueOf());
|
|
1562
|
-
needsFocus.current = false;
|
|
1563
|
-
setShowCalendar(false);
|
|
1564
|
-
}, customTitle: React__namespace.createElement("div", { className: css.css({
|
|
1565
|
-
display: 'flex',
|
|
1566
|
-
justifyContent: 'space-between',
|
|
1567
|
-
alignItems: 'center'
|
|
1568
|
-
}) },
|
|
1569
|
-
React__namespace.createElement(Button, { disabled: !!p.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), p.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
|
|
1570
|
-
React__namespace.createElement(Icon, { id: "pagerLeft" })),
|
|
1571
|
-
React__namespace.createElement(Text, { align: "center" },
|
|
1572
|
-
dateFns.format(calendarDate, 'LLLL'),
|
|
1573
|
-
" ",
|
|
1574
|
-
calendarDate.getFullYear()),
|
|
1575
|
-
React__namespace.createElement(Button, { disabled: !!p.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), p.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
|
|
1576
|
-
React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: p.value, cellSize: '2rem', min: p.min, max: p.max }))) }));
|
|
1577
|
-
};
|
|
1578
|
-
|
|
1579
1494
|
const Divider = () => {
|
|
1580
1495
|
const theme = useThemeSafely();
|
|
1581
1496
|
return (React__namespace.createElement("hr", { className: css.cx("divider", css.css({
|
|
@@ -2023,6 +1938,26 @@ const Image = (props) => {
|
|
|
2023
1938
|
}), props.className), src: props.src }));
|
|
2024
1939
|
};
|
|
2025
1940
|
|
|
1941
|
+
const Popover = (p) => {
|
|
1942
|
+
var _a, _b;
|
|
1943
|
+
const theme = useThemeSafely();
|
|
1944
|
+
const resposition = (_a = p.reposition) !== null && _a !== void 0 ? _a : true;
|
|
1945
|
+
return (React__namespace.createElement(reactTinyPopover.Popover, { containerClassName: css.css({
|
|
1946
|
+
zIndex: theme.zIndexes.tooltip
|
|
1947
|
+
}), reposition: resposition, isOpen: p.isOpen, positions: (_b = p.positions) !== null && _b !== void 0 ? _b : ['right', 'top', 'left', 'bottom'], onClickOutside: p.onClickOutside, content: ({ position, childRect, popoverRect }) => {
|
|
1948
|
+
var _a, _b, _c, _d;
|
|
1949
|
+
return (React__namespace.createElement(reactTinyPopover.ArrowContainer, { position: position, childRect: childRect, popoverRect: popoverRect, arrowColor: (_a = p.arrorColor) !== null && _a !== void 0 ? _a : theme.colors.border, arrowSize: 10 },
|
|
1950
|
+
React__namespace.createElement(TabLocker, null,
|
|
1951
|
+
React__namespace.createElement("div", { className: css.css({
|
|
1952
|
+
border: (_b = p.border) !== null && _b !== void 0 ? _b : theme.controls.border,
|
|
1953
|
+
borderRadius: (_c = p.border) !== null && _c !== void 0 ? _c : theme.controls.borderRadius,
|
|
1954
|
+
boxShadow: theme.controls.boxShadow,
|
|
1955
|
+
backgroundColor: (_d = p.backgroundColor) !== null && _d !== void 0 ? _d : theme.colors.bg,
|
|
1956
|
+
}) }, p.content))));
|
|
1957
|
+
} },
|
|
1958
|
+
React__namespace.createElement("span", null, p.parent)));
|
|
1959
|
+
};
|
|
1960
|
+
|
|
2026
1961
|
const InfoTip = (props) => {
|
|
2027
1962
|
var _a, _b;
|
|
2028
1963
|
const [showTip, setShowTip] = React__namespace.useState(false);
|
|
@@ -2100,6 +2035,15 @@ const InfoTip = (props) => {
|
|
|
2100
2035
|
}
|
|
2101
2036
|
};
|
|
2102
2037
|
|
|
2038
|
+
const InputErrorDisplay = (props) => {
|
|
2039
|
+
const theme = useThemeSafely();
|
|
2040
|
+
return (React__namespace.createElement(Text, { className: css.css({
|
|
2041
|
+
minHeight: theme.controls.inputErrorMinHeight,
|
|
2042
|
+
lineHeight: theme.controls.inputErrorMinHeight,
|
|
2043
|
+
color: theme.colors.negative
|
|
2044
|
+
}), smaller: true, noPad: true }, props.error));
|
|
2045
|
+
};
|
|
2046
|
+
|
|
2103
2047
|
const defaultMaxLength$1 = 100;
|
|
2104
2048
|
const BaseInput = React__namespace.forwardRef((props, ref) => {
|
|
2105
2049
|
var _a;
|
|
@@ -2163,29 +2107,353 @@ const BaseInput = React__namespace.forwardRef((props, ref) => {
|
|
|
2163
2107
|
right: calc(${theme.controls.padding} * 2);
|
|
2164
2108
|
`}
|
|
2165
2109
|
`;
|
|
2166
|
-
return (React__namespace.createElement("div",
|
|
2167
|
-
|
|
2168
|
-
|
|
2110
|
+
return (React__namespace.createElement("div", null,
|
|
2111
|
+
React__namespace.createElement("div", { className: css.cx('input', inputWrapperStyles, wrapperClassName) },
|
|
2112
|
+
inputElement,
|
|
2113
|
+
props.rightControl && (React__namespace.createElement("div", { className: rightControlStyles }, props.rightControl))),
|
|
2114
|
+
React__namespace.createElement(InputErrorDisplay, { error: props.error })));
|
|
2169
2115
|
});
|
|
2170
2116
|
|
|
2171
|
-
const tryClampRange = (value, min
|
|
2117
|
+
const tryClampRange = (value, min, max) => {
|
|
2172
2118
|
if (value === undefined) {
|
|
2173
2119
|
return value;
|
|
2174
2120
|
}
|
|
2175
2121
|
if (isNaN(value)) {
|
|
2176
2122
|
return undefined;
|
|
2177
2123
|
}
|
|
2178
|
-
|
|
2124
|
+
if (min !== undefined && value < min) {
|
|
2125
|
+
return min;
|
|
2126
|
+
}
|
|
2127
|
+
if (max !== undefined && value > max) {
|
|
2128
|
+
return max;
|
|
2129
|
+
}
|
|
2130
|
+
return value;
|
|
2131
|
+
};
|
|
2132
|
+
const isOutOfRange = (value, min, max) => {
|
|
2133
|
+
if (min !== undefined && value < min) {
|
|
2134
|
+
return true;
|
|
2135
|
+
}
|
|
2136
|
+
if (max !== undefined && value > max) {
|
|
2137
|
+
return true;
|
|
2138
|
+
}
|
|
2139
|
+
return false;
|
|
2179
2140
|
};
|
|
2180
|
-
const
|
|
2141
|
+
const getStepDecimalPlaces = (step) => {
|
|
2142
|
+
var _a, _b;
|
|
2143
|
+
if (!step) {
|
|
2144
|
+
return 0;
|
|
2145
|
+
}
|
|
2146
|
+
const strStep = typeof step === 'number' ? step.toString() : step;
|
|
2147
|
+
return (_b = (_a = strStep.split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
|
|
2148
|
+
};
|
|
2149
|
+
|
|
2150
|
+
/** useEffect but ignores the first call on component mount. */
|
|
2151
|
+
const useIgnoreMount = (effect, deps) => {
|
|
2152
|
+
const mounted = React__default['default'].useRef(false);
|
|
2153
|
+
React__default['default'].useEffect(() => {
|
|
2154
|
+
if (!mounted.current) {
|
|
2155
|
+
mounted.current = true;
|
|
2156
|
+
}
|
|
2157
|
+
else {
|
|
2158
|
+
effect();
|
|
2159
|
+
}
|
|
2160
|
+
}, deps);
|
|
2161
|
+
};
|
|
2162
|
+
|
|
2163
|
+
/** Common state handling for displaying validation messages with inputs. */
|
|
2164
|
+
const useInputValidationMessage = (ref, props) => {
|
|
2165
|
+
const [validationError, setValidationError] = React__default['default'].useState('');
|
|
2166
|
+
const updateErrorMessage = (customErrorOverride) => {
|
|
2167
|
+
var _a;
|
|
2168
|
+
const customError = customErrorOverride || props.customError || '';
|
|
2169
|
+
// set it OR clear it. either way, update it.
|
|
2170
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(customError);
|
|
2171
|
+
setValidationError(customError || getValidationMessage(ref.current, props.patternErrorMessage));
|
|
2172
|
+
};
|
|
2173
|
+
React__default['default'].useEffect(() => {
|
|
2174
|
+
updateErrorMessage();
|
|
2175
|
+
}, []);
|
|
2176
|
+
return [validationError, updateErrorMessage];
|
|
2177
|
+
};
|
|
2178
|
+
const getValidationMessage = (element, patternErrorMessage) => {
|
|
2181
2179
|
var _a;
|
|
2180
|
+
if (!element) {
|
|
2181
|
+
return '';
|
|
2182
|
+
}
|
|
2183
|
+
const validity = element.validity;
|
|
2184
|
+
if (validity.valid) {
|
|
2185
|
+
return '';
|
|
2186
|
+
}
|
|
2187
|
+
if (validity.customError) {
|
|
2188
|
+
return element.validationMessage;
|
|
2189
|
+
}
|
|
2190
|
+
if (validity.typeMismatch) {
|
|
2191
|
+
switch (element.type) {
|
|
2192
|
+
case 'url':
|
|
2193
|
+
return `Invalid URL.`;
|
|
2194
|
+
case 'email':
|
|
2195
|
+
return `Invalid email.`;
|
|
2196
|
+
default:
|
|
2197
|
+
return element.validationMessage;
|
|
2198
|
+
}
|
|
2199
|
+
}
|
|
2200
|
+
if (element instanceof HTMLInputElement) {
|
|
2201
|
+
if (validity.rangeOverflow) {
|
|
2202
|
+
return `Must be less than or equal to ${element.max}.`;
|
|
2203
|
+
}
|
|
2204
|
+
if (validity.rangeUnderflow) {
|
|
2205
|
+
return `Must be greater than or equal to ${element.min}.`;
|
|
2206
|
+
}
|
|
2207
|
+
if (validity.stepMismatch) {
|
|
2208
|
+
return `Limited to ${getStepDecimalPlaces(element.step)} decimal places.`;
|
|
2209
|
+
}
|
|
2210
|
+
}
|
|
2211
|
+
if (validity.tooShort) {
|
|
2212
|
+
return `Must be at least ${((_a = element.minLength) !== null && _a !== void 0 ? _a : 0).toLocaleString()} characters in length.`;
|
|
2213
|
+
}
|
|
2214
|
+
if (validity.valueMissing) {
|
|
2215
|
+
return 'Required.';
|
|
2216
|
+
}
|
|
2217
|
+
if (validity.patternMismatch && patternErrorMessage) {
|
|
2218
|
+
return patternErrorMessage;
|
|
2219
|
+
}
|
|
2220
|
+
// unhandled. let the browser decide.
|
|
2221
|
+
return element.validationMessage;
|
|
2222
|
+
};
|
|
2223
|
+
|
|
2224
|
+
const dateRegex = /(\d{1,2})(?:\/|-)(\d{1,2})(?:\/|-)(\d{4})/;
|
|
2225
|
+
const datePattern = dateRegex.source;
|
|
2226
|
+
const invalidDateMessage = 'Invalid date.';
|
|
2227
|
+
const DateInput = React__namespace.forwardRef((props, ref) => {
|
|
2228
|
+
var _a;
|
|
2229
|
+
const [dateValue, setDateValue] = React__namespace.useState(props.value);
|
|
2230
|
+
const [textValue, setTextValue] = React__namespace.useState(parseDateString(props.value));
|
|
2231
|
+
const updateValues = React__namespace.useCallback((value) => {
|
|
2232
|
+
let newDateValue;
|
|
2233
|
+
let newTextValue;
|
|
2234
|
+
if (typeof value === 'number') {
|
|
2235
|
+
newDateValue = value;
|
|
2236
|
+
newTextValue = parseDateString(value);
|
|
2237
|
+
}
|
|
2238
|
+
else if (typeof value === 'string') {
|
|
2239
|
+
newDateValue = parseDateNumber(value);
|
|
2240
|
+
newTextValue = value;
|
|
2241
|
+
}
|
|
2242
|
+
setDateValue(newDateValue);
|
|
2243
|
+
setTextValue(newTextValue);
|
|
2244
|
+
}, []);
|
|
2245
|
+
const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
|
|
2246
|
+
const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, { customError: props.customError, patternErrorMessage: invalidDateMessage });
|
|
2247
|
+
const updateDateErrorMessages = React__namespace.useCallback(() => {
|
|
2248
|
+
let dateError = '';
|
|
2249
|
+
if (dateValue === undefined) {
|
|
2250
|
+
if (!!textValue) {
|
|
2251
|
+
// the text pattern is a valid date format, but the numbers are wrong. example: 05/35/2000.
|
|
2252
|
+
dateError = invalidDateMessage;
|
|
2253
|
+
}
|
|
2254
|
+
}
|
|
2255
|
+
else if (isOutOfRange(dateValue, props.min, props.max)) {
|
|
2256
|
+
// out of range
|
|
2257
|
+
if (props.min !== undefined && props.max !== undefined) {
|
|
2258
|
+
dateError = `Must be be between ${parseDateString(props.min)} and ${parseDateString(props.max)}.`;
|
|
2259
|
+
}
|
|
2260
|
+
else if (props.min !== undefined) {
|
|
2261
|
+
dateError = `Must be greater than or equal to ${parseDateString(props.min)}.`;
|
|
2262
|
+
}
|
|
2263
|
+
else {
|
|
2264
|
+
dateError = `Must be less than or equal to ${parseDateString(props.max)}.`;
|
|
2265
|
+
}
|
|
2266
|
+
}
|
|
2267
|
+
updateErrorMessage(dateError);
|
|
2268
|
+
}, [dateValue, textValue]);
|
|
2269
|
+
const [showCalendar, setShowCalendar] = React__namespace.useState(false);
|
|
2270
|
+
const [calendarDate, setCalendarDate] = React__namespace.useState(getCalendarDate(props.value, props.min, props.max));
|
|
2271
|
+
// controls the one-time focus set on show
|
|
2272
|
+
const needsFocus = React__namespace.useRef(false);
|
|
2273
|
+
const toggleCalendar = React__namespace.useCallback((show) => {
|
|
2274
|
+
var _a;
|
|
2275
|
+
if (show === showCalendar) {
|
|
2276
|
+
return;
|
|
2277
|
+
}
|
|
2278
|
+
needsFocus.current = show;
|
|
2279
|
+
setShowCalendar(show);
|
|
2280
|
+
if (show) {
|
|
2281
|
+
setCalendarDate(getCalendarDate(dateValue, props.min, props.max));
|
|
2282
|
+
}
|
|
2283
|
+
else {
|
|
2284
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2285
|
+
}
|
|
2286
|
+
}, [dateValue, showCalendar]);
|
|
2287
|
+
const popover = React__namespace.useRef(null);
|
|
2288
|
+
const nativeProps = __rest(props, ["customError", "reposition", "onValueChange"]);
|
|
2289
|
+
useIgnoreMount(() => {
|
|
2290
|
+
var _a;
|
|
2291
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
|
|
2292
|
+
props.onValueChange(dateValue);
|
|
2293
|
+
}
|
|
2294
|
+
else {
|
|
2295
|
+
props.onValueChange(undefined);
|
|
2296
|
+
}
|
|
2297
|
+
updateDateErrorMessages();
|
|
2298
|
+
}, [dateValue]);
|
|
2299
|
+
useIgnoreMount(() => {
|
|
2300
|
+
updateDateErrorMessages();
|
|
2301
|
+
}, [textValue]);
|
|
2302
|
+
useIgnoreMount(() => {
|
|
2303
|
+
var _a;
|
|
2304
|
+
if (document.activeElement !== inputRef.current) {
|
|
2305
|
+
updateValues(props.value);
|
|
2306
|
+
setCalendarDate(getCalendarDate((_a = props.value) !== null && _a !== void 0 ? _a : 0, props.min, props.max));
|
|
2307
|
+
}
|
|
2308
|
+
updateDateErrorMessages();
|
|
2309
|
+
}, [props.value]);
|
|
2310
|
+
React__namespace.useLayoutEffect(() => {
|
|
2311
|
+
var _a, _b;
|
|
2312
|
+
if (needsFocus.current) {
|
|
2313
|
+
(_b = (_a = popover.current) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
2314
|
+
needsFocus.current = false;
|
|
2315
|
+
}
|
|
2316
|
+
});
|
|
2317
|
+
const input = (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "text", ref: inputRef, value: textValue !== null && textValue !== void 0 ? textValue : '', maxLength: 10, placeholder: (_a = props.placeholder) !== null && _a !== void 0 ? _a : 'MM/DD/YYYY', pattern: datePattern, rightControl: (!props.readOnly && !props.disabled) ? (React__namespace.createElement(Button, { variant: "icon", readOnly: props.readOnly, disabled: props.disabled, small: true, style: {
|
|
2318
|
+
fontSize: '1rem'
|
|
2319
|
+
}, onClick: () => {
|
|
2320
|
+
toggleCalendar(!showCalendar);
|
|
2321
|
+
} },
|
|
2322
|
+
React__namespace.createElement(Icon, { id: "pickDate" }))) : undefined, onChange: e => {
|
|
2323
|
+
var _a;
|
|
2324
|
+
updateValues(e.target.value || undefined);
|
|
2325
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2326
|
+
}, onFocus: e => {
|
|
2327
|
+
var _a;
|
|
2328
|
+
toggleCalendar(false);
|
|
2329
|
+
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2330
|
+
}, onBlur: e => {
|
|
2331
|
+
var _a, _b;
|
|
2332
|
+
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity())) {
|
|
2333
|
+
if (dateValue !== undefined) {
|
|
2334
|
+
if (isOutOfRange(dateValue, props.min, props.max)) {
|
|
2335
|
+
// try and fix the range
|
|
2336
|
+
updateValues(tryClampRange(dateValue, props.min, props.max));
|
|
2337
|
+
}
|
|
2338
|
+
}
|
|
2339
|
+
else {
|
|
2340
|
+
// just wipe it all
|
|
2341
|
+
updateValues(undefined);
|
|
2342
|
+
}
|
|
2343
|
+
}
|
|
2344
|
+
(_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
|
|
2345
|
+
} })));
|
|
2346
|
+
return (React__namespace.createElement(Popover, { reposition: props.reposition, isOpen: showCalendar, onClickOutside: () => {
|
|
2347
|
+
toggleCalendar(false);
|
|
2348
|
+
}, parent: input, content: (React__namespace.createElement("div", { ref: popover, className: css.css({
|
|
2349
|
+
paddingLeft: '1rem',
|
|
2350
|
+
paddingRight: '1rem',
|
|
2351
|
+
paddingBottom: '1rem'
|
|
2352
|
+
}) },
|
|
2353
|
+
React__namespace.createElement(Calendar, { onClick: date => {
|
|
2354
|
+
updateValues(date.valueOf());
|
|
2355
|
+
toggleCalendar(false);
|
|
2356
|
+
}, customTitle: React__namespace.createElement("div", { className: css.css({
|
|
2357
|
+
display: 'flex',
|
|
2358
|
+
justifyContent: 'space-between',
|
|
2359
|
+
alignItems: 'center'
|
|
2360
|
+
}) },
|
|
2361
|
+
React__namespace.createElement(Button, { disabled: !!props.min && dateFns.isBefore(dateFns.endOfMonth(dateFns.addMonths(calendarDate, -1)), props.min), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, -1)) },
|
|
2362
|
+
React__namespace.createElement(Icon, { id: "pagerLeft" })),
|
|
2363
|
+
React__namespace.createElement(Text, { align: "center" },
|
|
2364
|
+
dateFns.format(calendarDate, 'LLLL'),
|
|
2365
|
+
" ",
|
|
2366
|
+
calendarDate.getFullYear()),
|
|
2367
|
+
React__namespace.createElement(Button, { disabled: !!props.max && dateFns.isAfter(dateFns.startOfMonth(dateFns.addMonths(calendarDate, 1)), props.max), small: true, variant: "icon", onClick: () => setCalendarDate(dateFns.addMonths(calendarDate, 1)) },
|
|
2368
|
+
React__namespace.createElement(Icon, { id: "pagerRight" }))), month: calendarDate.getMonth() + 1, year: calendarDate.getFullYear(), showCurrent: true, smallHeader: true, selectedValue: dateValue, cellSize: '2rem', min: props.min, max: props.max }))) }));
|
|
2369
|
+
});
|
|
2370
|
+
const parseDateNumber = (rawValue) => {
|
|
2371
|
+
if (!rawValue) {
|
|
2372
|
+
return undefined;
|
|
2373
|
+
}
|
|
2374
|
+
let dateMs;
|
|
2375
|
+
const dateParts = dateRegex.exec(rawValue);
|
|
2376
|
+
if (dateParts) {
|
|
2377
|
+
const month = parseInt(dateParts[1], 10) - 1;
|
|
2378
|
+
const day = parseInt(dateParts[2], 10);
|
|
2379
|
+
const year = parseInt(dateParts[3], 10);
|
|
2380
|
+
if (dateFns.isExists(year, month, day)) {
|
|
2381
|
+
dateMs = new Date(year, month, day).valueOf();
|
|
2382
|
+
}
|
|
2383
|
+
}
|
|
2384
|
+
return dateMs;
|
|
2385
|
+
};
|
|
2386
|
+
const parseDateString = (dateMs) => {
|
|
2387
|
+
if (typeof dateMs === 'number') {
|
|
2388
|
+
return dateFns.format(dateMs, 'MM/dd/yyyy');
|
|
2389
|
+
}
|
|
2390
|
+
return undefined;
|
|
2391
|
+
};
|
|
2392
|
+
const getCalendarDate = (date, min, max) => {
|
|
2393
|
+
let calendarDate = date ? new Date(date) : new Date();
|
|
2394
|
+
// if there is a min/max we don't want the calendar to open to the current date if it's out of range
|
|
2395
|
+
if (min && dateFns.isBefore(calendarDate, min)) {
|
|
2396
|
+
calendarDate = new Date(min);
|
|
2397
|
+
}
|
|
2398
|
+
else if (max && dateFns.isAfter(calendarDate, max)) {
|
|
2399
|
+
calendarDate = new Date(max);
|
|
2400
|
+
}
|
|
2401
|
+
return calendarDate;
|
|
2402
|
+
};
|
|
2403
|
+
|
|
2404
|
+
const NumberInput = React__namespace.forwardRef((props, ref) => {
|
|
2405
|
+
const [localValue, setLocalValue] = React__namespace.useState(props.value);
|
|
2406
|
+
const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
|
|
2407
|
+
const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
|
|
2408
|
+
const nativeProps = __rest(props, ["customError", "onValueChange"]);
|
|
2409
|
+
useIgnoreMount(() => {
|
|
2410
|
+
var _a;
|
|
2411
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
|
|
2412
|
+
props.onValueChange(localValue);
|
|
2413
|
+
}
|
|
2414
|
+
else {
|
|
2415
|
+
props.onValueChange(undefined);
|
|
2416
|
+
}
|
|
2417
|
+
updateErrorMessage();
|
|
2418
|
+
}, [localValue]);
|
|
2419
|
+
useIgnoreMount(() => {
|
|
2420
|
+
if (document.activeElement !== inputRef.current) {
|
|
2421
|
+
setLocalValue(props.value);
|
|
2422
|
+
}
|
|
2423
|
+
updateErrorMessage();
|
|
2424
|
+
}, [props.value]);
|
|
2425
|
+
return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: "number", ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', maxLength: 20, onChange: e => {
|
|
2426
|
+
var _a;
|
|
2427
|
+
const newLocalValue = parseNumber(e.target.value);
|
|
2428
|
+
setLocalValue(newLocalValue);
|
|
2429
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2430
|
+
}, onBlur: e => {
|
|
2431
|
+
var _a, _b;
|
|
2432
|
+
let adjustedValue = localValue;
|
|
2433
|
+
if (e.target.validity.customError) {
|
|
2434
|
+
// if we're invalid due to a custom error, just wipe everything
|
|
2435
|
+
adjustedValue = undefined;
|
|
2436
|
+
}
|
|
2437
|
+
else {
|
|
2438
|
+
// try and fix the value
|
|
2439
|
+
adjustedValue = tryClampRange(adjustedValue, props.min, props.max);
|
|
2440
|
+
adjustedValue = tryClampDecimals(adjustedValue, props.step);
|
|
2441
|
+
}
|
|
2442
|
+
setLocalValue(adjustedValue);
|
|
2443
|
+
// makes our displayed value always matches the adjusted value
|
|
2444
|
+
// examples of failures are 'e', '-', and 5.0 in an integer (step=0) field.
|
|
2445
|
+
e.target.value = (_a = adjustedValue === null || adjustedValue === void 0 ? void 0 : adjustedValue.toString()) !== null && _a !== void 0 ? _a : '';
|
|
2446
|
+
(_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, e);
|
|
2447
|
+
} })));
|
|
2448
|
+
});
|
|
2449
|
+
const tryClampDecimals = (value, step = 0) => {
|
|
2182
2450
|
if (value === undefined) {
|
|
2183
2451
|
return value;
|
|
2184
2452
|
}
|
|
2185
2453
|
if (isNaN(value)) {
|
|
2186
2454
|
return undefined;
|
|
2187
2455
|
}
|
|
2188
|
-
const decimals =
|
|
2456
|
+
const decimals = getStepDecimalPlaces(step);
|
|
2189
2457
|
if (decimals === 0) {
|
|
2190
2458
|
return Math.floor(value);
|
|
2191
2459
|
}
|
|
@@ -2200,99 +2468,40 @@ const parseNumber = (rawValue) => {
|
|
|
2200
2468
|
}
|
|
2201
2469
|
}
|
|
2202
2470
|
return value;
|
|
2203
|
-
};
|
|
2204
|
-
const NumberInput = React__namespace.forwardRef((props, ref) => {
|
|
2205
|
-
const [localValue, setLocalValue] = React__namespace.useState(undefined);
|
|
2206
|
-
const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
|
|
2207
|
-
const nativeProps = __rest(props, ["customValidityChecks", "constrainOnBlur"]);
|
|
2208
|
-
React__namespace.useEffect(() => {
|
|
2209
|
-
// sync local value to outer value
|
|
2210
|
-
setLocalValue(props.value);
|
|
2211
|
-
}, [props.value]);
|
|
2212
|
-
return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { ref: ref, maxLength: 20, type: "number", value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
|
|
2213
|
-
var _a;
|
|
2214
|
-
const newLocalValue = parseNumber(e.target.value);
|
|
2215
|
-
if (props.customValidityChecks) {
|
|
2216
|
-
let error;
|
|
2217
|
-
for (const func of props.customValidityChecks) {
|
|
2218
|
-
error = func(newLocalValue);
|
|
2219
|
-
if (error) {
|
|
2220
|
-
break;
|
|
2221
|
-
}
|
|
2222
|
-
}
|
|
2223
|
-
e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
|
|
2224
|
-
}
|
|
2225
|
-
setLocalValue(newLocalValue);
|
|
2226
|
-
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newLocalValue, e);
|
|
2227
|
-
}, onBlur: e => {
|
|
2228
|
-
var _a;
|
|
2229
|
-
if (props.onBlur) {
|
|
2230
|
-
let currentValue = localValue;
|
|
2231
|
-
if ((_a = props.constrainOnBlur) !== null && _a !== void 0 ? _a : true) {
|
|
2232
|
-
currentValue = tryClampRange(currentValue, props.min, props.max);
|
|
2233
|
-
currentValue = tryClampDecimals(currentValue, props.step);
|
|
2234
|
-
}
|
|
2235
|
-
if (currentValue !== localValue) {
|
|
2236
|
-
setLocalValue(currentValue);
|
|
2237
|
-
}
|
|
2238
|
-
// after all we've done, it's still possible to have strange characters in the box.
|
|
2239
|
-
// examples are '-' and 'e'. the box will show as invalid and no number will be sent from the control or be included in the local state.
|
|
2240
|
-
// here we will clean that up locally in the control.
|
|
2241
|
-
if (!e.target.checkValidity()) {
|
|
2242
|
-
e.target.value = '';
|
|
2243
|
-
}
|
|
2244
|
-
props.onBlur(currentValue, e);
|
|
2245
|
-
}
|
|
2246
|
-
}, onKeyDown: e => {
|
|
2247
|
-
var _a, _b;
|
|
2248
|
-
if (e.key === 'Enter') {
|
|
2249
|
-
// handle form submission on enter for onBlur-only situations.
|
|
2250
|
-
// onBlur will not be fired so any local change will not be communicated to the outside.
|
|
2251
|
-
if (!props.onChange) {
|
|
2252
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
2253
|
-
}
|
|
2254
|
-
}
|
|
2255
|
-
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
|
|
2256
|
-
} })));
|
|
2257
|
-
});
|
|
2471
|
+
};
|
|
2258
2472
|
|
|
2259
2473
|
const TextInput = React__namespace.forwardRef((props, ref) => {
|
|
2260
2474
|
var _a;
|
|
2261
|
-
const [localValue, setLocalValue] = React__namespace.useState(
|
|
2475
|
+
const [localValue, setLocalValue] = React__namespace.useState(props.value);
|
|
2262
2476
|
const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
|
|
2263
|
-
const
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2477
|
+
const [validationError, updateErrorMessage] = useInputValidationMessage(inputRef, props);
|
|
2478
|
+
const nativeProps = __rest(props, ["onValueChange", "customError", "patternErrorMessage"]);
|
|
2479
|
+
useIgnoreMount(() => {
|
|
2480
|
+
var _a;
|
|
2481
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
|
|
2482
|
+
props.onValueChange(localValue);
|
|
2483
|
+
}
|
|
2484
|
+
else {
|
|
2485
|
+
props.onValueChange(undefined);
|
|
2486
|
+
}
|
|
2487
|
+
updateErrorMessage();
|
|
2488
|
+
}, [localValue]);
|
|
2489
|
+
useIgnoreMount(() => {
|
|
2490
|
+
if (document.activeElement !== inputRef.current) {
|
|
2491
|
+
setLocalValue(props.value);
|
|
2492
|
+
}
|
|
2493
|
+
updateErrorMessage();
|
|
2267
2494
|
}, [props.value]);
|
|
2268
|
-
return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
|
|
2495
|
+
return (React__namespace.createElement(BaseInput, Object.assign({}, nativeProps, { error: validationError, type: (_a = props.type) !== null && _a !== void 0 ? _a : 'text', ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
|
|
2269
2496
|
var _a;
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
let error;
|
|
2273
|
-
for (const func of props.customValidityChecks) {
|
|
2274
|
-
error = func(value);
|
|
2275
|
-
if (error) {
|
|
2276
|
-
break;
|
|
2277
|
-
}
|
|
2278
|
-
}
|
|
2279
|
-
e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
|
|
2280
|
-
}
|
|
2281
|
-
setLocalValue(value);
|
|
2282
|
-
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, e);
|
|
2497
|
+
setLocalValue(e.target.value || undefined);
|
|
2498
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2283
2499
|
}, onBlur: e => {
|
|
2284
2500
|
var _a;
|
|
2285
|
-
(
|
|
2286
|
-
|
|
2287
|
-
var _a, _b;
|
|
2288
|
-
if (e.key === 'Enter') {
|
|
2289
|
-
// handle form submission on enter for onBlur-only situations.
|
|
2290
|
-
// onBlur will not be fired so any local change will not be communicated to the outside.
|
|
2291
|
-
if (!props.onChange) {
|
|
2292
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
2293
|
-
}
|
|
2501
|
+
if (!e.target.checkValidity()) {
|
|
2502
|
+
setLocalValue(undefined);
|
|
2294
2503
|
}
|
|
2295
|
-
(
|
|
2504
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2296
2505
|
} })));
|
|
2297
2506
|
});
|
|
2298
2507
|
|
|
@@ -2677,7 +2886,7 @@ const OmniLink = (props) => {
|
|
|
2677
2886
|
const Picker = (props) => {
|
|
2678
2887
|
const selectProps = __rest(props
|
|
2679
2888
|
// if we put numbers in, we expect them out
|
|
2680
|
-
, ["value", "options", "onChange", "
|
|
2889
|
+
, ["value", "options", "onChange", "readOnly", "round", "controlAlign"]);
|
|
2681
2890
|
// if we put numbers in, we expect them out
|
|
2682
2891
|
let isNumber = false;
|
|
2683
2892
|
if (props.options && props.options.length) {
|
|
@@ -2713,7 +2922,7 @@ const Picker = (props) => {
|
|
|
2713
2922
|
${props.round && `
|
|
2714
2923
|
border-radius: ${theme.controls.roundRadius};
|
|
2715
2924
|
`}
|
|
2716
|
-
${props.
|
|
2925
|
+
${props.readOnly && `
|
|
2717
2926
|
background-color: transparent !important;
|
|
2718
2927
|
border: none;
|
|
2719
2928
|
-webkit-appearance: none;
|
|
@@ -2724,9 +2933,9 @@ const Picker = (props) => {
|
|
|
2724
2933
|
}
|
|
2725
2934
|
`}
|
|
2726
2935
|
`;
|
|
2727
|
-
|
|
2936
|
+
const select = (React__namespace.createElement("select", Object.assign({}, selectProps, { tabIndex: props.readOnly ? -1 : selectProps.tabIndex, className: css.cx('picker', selectStyles, props.className), value: props.value, onKeyDown: e => {
|
|
2728
2937
|
var _a;
|
|
2729
|
-
if (props.
|
|
2938
|
+
if (props.readOnly) {
|
|
2730
2939
|
if (e.keyCode === 9) {
|
|
2731
2940
|
//TAB
|
|
2732
2941
|
return;
|
|
@@ -2739,7 +2948,7 @@ const Picker = (props) => {
|
|
|
2739
2948
|
}
|
|
2740
2949
|
}, onMouseDown: e => {
|
|
2741
2950
|
var _a;
|
|
2742
|
-
if (props.
|
|
2951
|
+
if (props.readOnly) {
|
|
2743
2952
|
e.preventDefault();
|
|
2744
2953
|
e.stopPropagation();
|
|
2745
2954
|
}
|
|
@@ -2769,6 +2978,14 @@ const Picker = (props) => {
|
|
|
2769
2978
|
}
|
|
2770
2979
|
return React__namespace.createElement("option", { key: val, value: val }, label);
|
|
2771
2980
|
})));
|
|
2981
|
+
if (props.controlAlign) {
|
|
2982
|
+
return (React__namespace.createElement("span", { className: css.css({
|
|
2983
|
+
display: 'inline-block',
|
|
2984
|
+
width: '100%',
|
|
2985
|
+
paddingBottom: theme.controls.inputErrorMinHeight
|
|
2986
|
+
}) }, select));
|
|
2987
|
+
}
|
|
2988
|
+
return select;
|
|
2772
2989
|
};
|
|
2773
2990
|
|
|
2774
2991
|
const Pager = (props) => {
|
|
@@ -3273,12 +3490,12 @@ const SearchBox = (props) => {
|
|
|
3273
3490
|
return (_c = props.onSubmit) === null || _c === void 0 ? void 0 : _c.call(props);
|
|
3274
3491
|
});
|
|
3275
3492
|
const theme = useThemeSafely();
|
|
3276
|
-
const submitButton = (React__namespace.createElement(Button, { disabled: waiting,
|
|
3493
|
+
const submitButton = (React__namespace.createElement(Button, { disabled: waiting, readOnly: !props.onSubmit, type: "submit", className: css.css({
|
|
3277
3494
|
color: `${theme.colors.font} !important;`,
|
|
3278
3495
|
fontSize: '1rem'
|
|
3279
3496
|
}), variant: "icon", small: true },
|
|
3280
3497
|
React__namespace.createElement(Icon, { id: waiting ? 'waiting' : 'search', spin: waiting })));
|
|
3281
|
-
//TB: replace with new inputs
|
|
3498
|
+
//TB: FUTURE replace with new inputs
|
|
3282
3499
|
return (React__namespace.createElement(Form, { role: "search", className: css.cx('searchBox', props.className), onSubmit: onSubmit },
|
|
3283
3500
|
React__namespace.createElement(Input, { id: props.id, debounceMs: props.debounceMs, disabled: waiting, type: "text", value: props.value, placeholder: props.placeholder, round: props.round, onChange: props.onChange, rightControl: submitButton })));
|
|
3284
3501
|
};
|
|
@@ -3456,7 +3673,7 @@ const TabHeader = (p) => {
|
|
|
3456
3673
|
});
|
|
3457
3674
|
}
|
|
3458
3675
|
return (React__namespace.createElement("li", { key: index, className: tabStyles },
|
|
3459
|
-
React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name,
|
|
3676
|
+
React__namespace.createElement(Button, { className: buttonStyles, variant: buttonVariant, title: tab.name, readOnly: active, onClick: () => {
|
|
3460
3677
|
setTabIndex(index);
|
|
3461
3678
|
if (p.onTabChanged) {
|
|
3462
3679
|
p.onTabChanged(index);
|
|
@@ -3592,13 +3809,32 @@ const defaultMaxLength = 200;
|
|
|
3592
3809
|
const defaultRows = 10;
|
|
3593
3810
|
const TextArea = React__namespace.forwardRef((props, ref) => {
|
|
3594
3811
|
var _a, _b;
|
|
3595
|
-
const [localValue, setLocalValue] = React__namespace.useState(
|
|
3812
|
+
const [localValue, setLocalValue] = React__namespace.useState(props.value);
|
|
3813
|
+
const [validationError, setValidationError] = React__namespace.useState('');
|
|
3814
|
+
const updateErrorMessage = React__namespace.useCallback(() => {
|
|
3815
|
+
setValidationError(getValidationMessage(inputRef.current));
|
|
3816
|
+
}, []);
|
|
3596
3817
|
const inputRef = (ref !== null && ref !== void 0 ? ref : React__namespace.useRef(null));
|
|
3597
|
-
const nativeProps = __rest(props, ["
|
|
3818
|
+
const nativeProps = __rest(props, ["onValueChange"]);
|
|
3598
3819
|
const theme = useThemeSafely();
|
|
3599
3820
|
React__namespace.useEffect(() => {
|
|
3600
|
-
|
|
3601
|
-
|
|
3821
|
+
updateErrorMessage();
|
|
3822
|
+
}, []);
|
|
3823
|
+
useIgnoreMount(() => {
|
|
3824
|
+
var _a;
|
|
3825
|
+
if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checkValidity()) {
|
|
3826
|
+
props.onValueChange(localValue);
|
|
3827
|
+
}
|
|
3828
|
+
else {
|
|
3829
|
+
props.onValueChange(undefined);
|
|
3830
|
+
}
|
|
3831
|
+
updateErrorMessage();
|
|
3832
|
+
}, [localValue]);
|
|
3833
|
+
useIgnoreMount(() => {
|
|
3834
|
+
if (document.activeElement !== inputRef.current) {
|
|
3835
|
+
setLocalValue(props.value);
|
|
3836
|
+
}
|
|
3837
|
+
updateErrorMessage();
|
|
3602
3838
|
}, [props.value]);
|
|
3603
3839
|
const styles = css.css({
|
|
3604
3840
|
maxWidth: '100%',
|
|
@@ -3637,35 +3873,16 @@ const TextArea = React__namespace.forwardRef((props, ref) => {
|
|
|
3637
3873
|
boxShadow: 'none'
|
|
3638
3874
|
}
|
|
3639
3875
|
});
|
|
3640
|
-
return (React__namespace.createElement("
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
|
|
3650
|
-
}
|
|
3651
|
-
e.target.setCustomValidity(error !== null && error !== void 0 ? error : '');
|
|
3652
|
-
}
|
|
3653
|
-
setLocalValue(value);
|
|
3654
|
-
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, e);
|
|
3655
|
-
}, onBlur: e => {
|
|
3656
|
-
var _a;
|
|
3657
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, localValue, e);
|
|
3658
|
-
}, onKeyDown: e => {
|
|
3659
|
-
var _a, _b;
|
|
3660
|
-
if (e.key === 'Enter') {
|
|
3661
|
-
// handle form submission on enter for onBlur-only situations.
|
|
3662
|
-
// onBlur will not be fired so any local change will not be communicated to the outside.
|
|
3663
|
-
if (!props.onChange) {
|
|
3664
|
-
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
|
|
3665
|
-
}
|
|
3666
|
-
}
|
|
3667
|
-
(_b = props.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(props, e);
|
|
3668
|
-
} })));
|
|
3876
|
+
return (React__namespace.createElement("span", { className: css.css({
|
|
3877
|
+
display: 'inline-block',
|
|
3878
|
+
width: '100%'
|
|
3879
|
+
}) },
|
|
3880
|
+
React__namespace.createElement("textarea", Object.assign({}, nativeProps, { className: css.cx(styles, props.className), autoComplete: (_a = props.autoComplete) !== null && _a !== void 0 ? _a : 'off', tabIndex: props.readOnly ? -1 : props.tabIndex, maxLength: props.maxLength || defaultMaxLength, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : defaultRows, ref: inputRef, value: localValue !== null && localValue !== void 0 ? localValue : '', onChange: e => {
|
|
3881
|
+
var _a;
|
|
3882
|
+
setLocalValue(e.target.value || undefined);
|
|
3883
|
+
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
3884
|
+
} })),
|
|
3885
|
+
React__namespace.createElement(InputErrorDisplay, { error: validationError })));
|
|
3669
3886
|
});
|
|
3670
3887
|
|
|
3671
3888
|
const ToggleButton = (props) => {
|
|
@@ -3735,10 +3952,9 @@ const ToggleButtonGroup = (props) => {
|
|
|
3735
3952
|
})));
|
|
3736
3953
|
};
|
|
3737
3954
|
|
|
3738
|
-
const TogglePasswordInput = (
|
|
3955
|
+
const TogglePasswordInput = React__namespace.forwardRef((props, ref) => {
|
|
3739
3956
|
const [show, setShow] = React__namespace.useState(false);
|
|
3740
|
-
|
|
3741
|
-
return (React__namespace.createElement(Input, Object.assign({}, p, { type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
|
|
3957
|
+
return (React__namespace.createElement(TextInput, Object.assign({}, props, { ref: ref, type: show ? 'text' : 'password', rightControl: (React__namespace.createElement(Button, { small: true, style: {
|
|
3742
3958
|
// small button is required here due to the icon pushing outside the boundries of the
|
|
3743
3959
|
// parent textbox. increasing the font size here to fill the small button.
|
|
3744
3960
|
fontSize: '1rem'
|
|
@@ -3746,7 +3962,7 @@ const TogglePasswordInput = (p) => {
|
|
|
3746
3962
|
setShow(previous => !previous);
|
|
3747
3963
|
} },
|
|
3748
3964
|
React__namespace.createElement(Icon, { id: show ? 'show' : 'hide' }))) })));
|
|
3749
|
-
};
|
|
3965
|
+
});
|
|
3750
3966
|
|
|
3751
3967
|
const WaitingIndicator = (p) => {
|
|
3752
3968
|
var _a, _b;
|
|
@@ -3822,7 +4038,7 @@ exports.Calendar = Calendar;
|
|
|
3822
4038
|
exports.Checkbox = Checkbox;
|
|
3823
4039
|
exports.ConfirmModal = ConfirmModal;
|
|
3824
4040
|
exports.CopyButton = CopyButton;
|
|
3825
|
-
exports.
|
|
4041
|
+
exports.DateInput = DateInput;
|
|
3826
4042
|
exports.Divider = Divider;
|
|
3827
4043
|
exports.ErrorModal = ErrorModal;
|
|
3828
4044
|
exports.FileUploader = FileUploader;
|