Fix/table dismounting

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@togglecorp/toggle-ui",
-    "version": "0.17.0",
+    "version": "0.18.3",
     "description": "React component library by togglecorp",
     "files": [
         "/build"

src/components/Checkbox/index.tsx

@@ -10,6 +10,7 @@ import styles from './styles.css';
 
 export interface CheckboxProps<N> {
     className?: string;
+    labelContainerClassName?: string;
     labelClassName?: string;
     checkmark?: (p: CheckmarkProps) => React.ReactElement;
     checkmarkClassName?: string;
@@ -22,6 +23,10 @@ export interface CheckboxProps<N> {
     value: boolean | undefined | null;
     onChange: (value: boolean, name: N) => void;
     name: N;
+    errorContainerClassName?: string;
+    hintContainerClassName?: string;
+    error?: string;
+    hint?: React.ReactNode;
 }
 
 function Checkbox<N extends string | number>(props: CheckboxProps<N>) {
@@ -30,6 +35,7 @@ function Checkbox<N extends string | number>(props: CheckboxProps<N>) {
         tooltip,
         checkmark: Checkmark = DefaultCheckmark,
         className: classNameFromProps,
+        labelContainerClassName,
         value,
         disabled,
         readOnly,
@@ -39,6 +45,10 @@ function Checkbox<N extends string | number>(props: CheckboxProps<N>) {
         indeterminate,
         uiMode,
         name,
+        error,
+        hint,
+        errorContainerClassName,
+        hintContainerClassName,
         ...otherProps
     } = props;
 
@@ -54,7 +64,7 @@ function Checkbox<N extends string | number>(props: CheckboxProps<N>) {
 
     const className = _cs(
         styles.checkbox,
-        classNameFromProps,
+        labelContainerClassName,
         indeterminate && styles.indeterminate,
         !indeterminate && value && styles.checked,
         disabled && styles.disabled,
@@ -63,32 +73,48 @@ function Checkbox<N extends string | number>(props: CheckboxProps<N>) {
     );
 
     return (
-        <label // eslint-disable-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
-            className={className}
-            title={tooltip}
+        <div
+            className={_cs(styles.container, classNameFromProps)}
         >
-            <VisualFeedback
-                disabled={disabled}
-                readOnly={readOnly}
-            />
-            <Checkmark
-                className={_cs(checkmarkClassName, styles.checkmark)}
-                value={value ?? false}
-                indeterminate={indeterminate}
-                uiMode={uiMode}
-            />
-            <input
-                onChange={handleChange}
-                className={styles.input}
-                type="checkbox"
-                checked={value ?? false}
-                disabled={disabled || readOnly}
-                {...otherProps}
-            />
-            <div className={_cs(styles.label, labelClassName)}>
-                { label }
-            </div>
-        </label>
+            <label // eslint-disable-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for, max-len
+                className={className}
+                title={tooltip}
+            >
+                <VisualFeedback
+                    disabled={disabled}
+                    readOnly={readOnly}
+                />
+                <Checkmark
+                    className={_cs(checkmarkClassName, styles.checkmark)}
+                    value={value ?? false}
+                    indeterminate={indeterminate}
+                    uiMode={uiMode}
+                />
+                <input
+                    onChange={handleChange}
+                    className={styles.input}
+                    type="checkbox"
+                    checked={value ?? false}
+                    disabled={disabled || readOnly}
+                    {...otherProps}
+                />
+                {label && (
+                    <div className={_cs(styles.label, labelClassName)}>
+                        { label }
+                    </div>
+                )}
+            </label>
+            {error && (
+                <div className={_cs(styles.error, errorContainerClassName)}>
+                    {error}
+                </div>
+            )}
+            {!error && hint && (
+                <div className={_cs(styles.hint, hintContainerClassName)}>
+                    {hint}
+                </div>
+            )}
+        </div>
     );
 }
 

src/components/Checkbox/styles.css

@@ -1,13 +1,30 @@
+.container {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    cursor: pointer;
+    gap: var(--tui-spacing-extra-small);
+    padding: var(--tui-spacing-extra-small);
+
+    .hint {
+        color: var(--color-hint);
+        font-size: var(--tui-font-size-small);
+    }
+
+    .error {
+        color: var(--tui-color-danger);
+        font-size: var(--tui-font-size-small);
+    }
+}
+
 .checkbox {
     --color-text: transparent;
     --color-checkmark: transparent;
 
     display: flex;
-    position: relative;
     align-items: center;
-    cursor: pointer;
-    padding: calc(var(--tui-spacing-medium) - var(--tui-spacing-extra-small));
     color: var(--color-text);
+    gap: var(--tui-spacing-extra-small);
     user-select: none;
 
     .checkmark {
@@ -21,10 +38,6 @@
         display: none;
     }
 
-    .label {
-        padding: var(--tui-spacing-extra-small);
-    }
-
     &.light {
         --color-text: var(--tui-color-text-light);
         --color-checkmark: var(--tui-color-text-light);

src/components/DateInput/index.tsx

@@ -45,7 +45,7 @@ function DateInput<T extends string>(props: Props<T>) {
         uiMode,
         inputElementRef,
         containerRef: containerRefFromProps,
-        inputSectionRef,
+        inputSectionRef: inputSectionRefFromProps,
         inputClassName,
         onChange,
         name,
@@ -55,9 +55,11 @@ function DateInput<T extends string>(props: Props<T>) {
 
     const [calendarMonthSelectionPopupClassName] = React.useState(randomString(16));
     const createdContainerRef = React.useRef<HTMLDivElement>(null);
+    const createdInputSectionRef = React.useRef<HTMLDivElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
     const containerRef = containerRefFromProps ?? createdContainerRef;
+    const inputSectionRef = inputSectionRefFromProps ?? createdInputSectionRef;
 
     const [
         showCalendar,
@@ -88,7 +90,7 @@ function DateInput<T extends string>(props: Props<T>) {
         showCalendar,
         handlePopupBlur,
         popupRef,
-        containerRef,
+        inputSectionRef,
     );
 
     const handleCalendarDateClick: CalendarProps<CalendarDateProps>['onDateClick'] = React.useCallback(
@@ -185,7 +187,7 @@ function DateInput<T extends string>(props: Props<T>) {
             />
             {!readOnly && showCalendar && (
                 <Popup
-                    parentRef={containerRef}
+                    parentRef={inputSectionRef}
                     elementRef={popupRef}
                     className={styles.calendarPopup}
                     contentClassName={styles.popupContent}

src/components/DateRangeInput/index.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
     _cs,
     randomString,
     isDefined,
+    isNotDefined,
 } from '@togglecorp/fujs';
 import {
     IoCalendarOutline,
@@ -98,6 +99,7 @@ export interface Props<N extends NameType> extends InheritedProps {
     value: Value | undefined | null;
     name: N;
     onChange?: (value: Value | undefined, name: N) => void;
+    placeholder?: string;
 }
 
 function DateRangeInput<N extends NameType>(props: Props<N>) {
@@ -119,11 +121,12 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
         uiMode,
         inputElementRef,
         containerRef: containerRefFromProps,
-        inputSectionRef,
+        inputSectionRef: inputSectionRefFromProps,
         inputClassName,
         onChange,
         name,
         value,
+        placeholder,
     } = props;
 
     const [tempDate, setTempDate] = React.useState<Partial<Value>>({
@@ -132,9 +135,11 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
     });
     const [calendarMonthSelectionPopupClassName] = React.useState(randomString(16));
     const createdContainerRef = React.useRef<HTMLDivElement>(null);
+    const createdInputSectionRef = React.useRef<HTMLDivElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
 
     const containerRef = containerRefFromProps ?? createdContainerRef;
+    const inputSectionRef = inputSectionRefFromProps ?? createdInputSectionRef;
     const [
         showCalendar,
         setShowCalendarTrue,
@@ -171,7 +176,7 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
         showCalendar,
         handlePopupBlur,
         popupRef,
-        containerRef,
+        inputSectionRef,
     );
 
     const dateRendererParams = React.useCallback(() => ({
@@ -276,6 +281,33 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
         1,
     );
 
+    const dateInputLabel = useMemo(
+        () => {
+            if (
+                isNotDefined(tempDate.startDate)
+                    && isNotDefined(value?.startDate)
+                    && isNotDefined(value?.endDate)
+            ) {
+                return undefined;
+            }
+
+            const startDateString = tempDate.startDate ?? value?.startDate;
+            const start = isDefined(startDateString)
+                ? new Date(startDateString).toLocaleDateString()
+                : '--';
+            const endDateString = value?.endDate;
+            const end = isDefined(endDateString)
+                ? new Date(endDateString).toLocaleDateString()
+                : '--';
+
+            return [
+                start,
+                end,
+            ].join(' to ');
+        },
+        [value, tempDate],
+    );
+
     return (
         <>
             <InputContainer
@@ -328,55 +360,30 @@ function DateRangeInput<N extends NameType>(props: Props<N>) {
                 readOnly={readOnly}
                 uiMode={uiMode}
                 input={(
-                    <>
-                        <RawInput<string>
-                            name="startDate"
-                            className={_cs(
-                                styles.input,
-                                styles.startDateInput,
-                                !!error && styles.errored,
-                                !(tempDate.startDate ?? value?.startDate) && styles.empty,
-                                inputClassName,
-                            )}
-                            value={tempDate.startDate ?? value?.startDate}
-                            // NOTE: Make this required to hide clear button on firefox
-                            required={!!(tempDate.startDate ?? value?.startDate)}
-                            elementRef={inputElementRef}
-                            readOnly
-                            uiMode={uiMode}
-                            disabled={disabled}
-                            onFocus={setShowCalendarTrue}
-                            type="date"
-                        />
-                        <div className={styles.separator}>
-                            to
-                        </div>
-                        <RawInput<string>
-                            name="startDate"
-                            className={_cs(
-                                styles.input,
-                                styles.endDateInput,
-                                !!error && styles.errored,
-                                !value?.endDate && styles.empty,
-                                inputClassName,
-                            )}
-                            elementRef={inputElementRef}
-                            readOnly
-                            onClick={setShowCalendarTrue}
-                            // NOTE: Make this required to hide clear button on firefox
-                            required={!!value?.endDate}
-                            value={value?.endDate}
-                            uiMode={uiMode}
-                            disabled={disabled}
-                            onFocus={setShowCalendarTrue}
-                            type="date"
-                        />
-                    </>
+                    <RawInput
+                        elementRef={inputElementRef}
+                        name="date-range"
+                        value={dateInputLabel}
+                        readOnly
+                        uiMode={uiMode}
+                        disabled={disabled}
+                        onFocus={setShowCalendarTrue}
+                        onClick={setShowCalendarTrue}
+                        className={_cs(
+                            styles.input,
+                            !!error && styles.errored,
+                            !(tempDate.startDate || value?.startDate || value?.endDate)
+                                && styles.empty,
+                            inputClassName,
+                        )}
+                        type="text"
+                        placeholder={placeholder}
+                    />
                 )}
             />
             {!readOnly && showCalendar && (
                 <Popup
-                    parentRef={containerRef}
+                    parentRef={inputSectionRef}
                     elementRef={popupRef}
                     freeWidth
                     className={styles.calendarPopup}