refactor checklist portion of dropdown into its own optionlist; implement checklist component

Author: KoolADE85

components/dash-core-components/src/components/Checklist.react.js

@@ -0,0 +1,63 @@
+import React, {useMemo} from 'react';
+import {append, includes, without} from 'ramda';
+import {ChecklistProps, PersistedProps, PersistenceTypes} from '../types';
+import './css/checklist.css';
+
+import {sanitizeOptions} from '../utils/optionTypes';
+import LoadingElement from '../utils/_LoadingElement';
+import {Option, OptionsList} from '../utils/optionRendering';
+
+/**
+ * Checklist is a component that encapsulates several checkboxes.
+ * The values and labels of the checklist are specified in the `options`
+ * property and the checked items are specified with the `value` property.
+ * Each checkbox is rendered as an input with a surrounding label.
+ */
+export default function Checklist({
+    className,
+    id,
+    style,
+    setProps,
+    inputStyle = {},
+    inputClassName = '',
+    labelStyle = {},
+    labelClassName = '',
+    options = [],
+    value = [],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    inline = false,
+}: ChecklistProps) {
+    const sanitizedOptions = useMemo(() => {
+        return sanitizeOptions(options);
+    }, [options]);
+
+    const stylingProps = {
+        id,
+        className: 'dash-checklist ' + (className ?? ''),
+        style,
+        optionClassName: inline ? 'dash-checklist-inline' : undefined,
+        inputStyle,
+        inputClassName,
+        labelStyle,
+        labelClassName,
+    };
+
+    return (
+        <LoadingElement>
+            {loadingProps => (
+                <OptionsList
+                    {...loadingProps}
+                    options={sanitizedOptions}
+                    selected={value ?? []}
+                    onSelectionChange={selection => {
+                        setProps({value: selection});
+                    }}
+                    {...stylingProps}
+                />
+            )}
+        </LoadingElement>
+    );
+}

components/dash-core-components/src/components/Checklist.tsx

@@ -0,0 +1,4 @@
+.dash-options-list-option.dash-checklist-inline {
+    display: inline-block;
+    margin-right: calc(var(--Dash-Spacing) * 4);
+}

components/dash-core-components/src/components/css/checklist.css

@@ -191,40 +191,5 @@
 
 .dash-dropdown-option {
     padding: var(--Dash-Spacing) calc(var(--Dash-Spacing) * 3);
-    background: var(--Dash-Fill-Inverse-strong);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
-    color: var(--Dash-Text-Strong);
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    user-select: none;
-    overflow: hidden;
-}
-
-.dash-dropdown-option:not(:has(input[disabled])):hover,
-.dash-dropdown-option:not(:has(input[disabled])):focus-within {
-    color: var(--Dash-Fill-Interactive-Strong);
-    background: var(--Dash-Fill-Interactive-Weak);
-}
-
-.dash-dropdown-option:has(input[disabled]) {
-    color: var(--Dash-Text-Disabled);
-    cursor: not-allowed;
-}
-
-.dash-dropdown-option-text {
-    white-space: pre;
-}
-
-.dash-dropdown-option-checkbox {
-    display: inline-block;
-    margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
-    box-sizing: border-box;
-    border: 1px solid var(--Dash-Stroke-Strong);
-}
-
-.dash-dropdown-option-checkbox:hover,
-.dash-dropdown-option-checkbox:focus,
-.dash-dropdown-option-checkbox:checked {
-    accent-color: var(--Dash-Fill-Interactive-Strong);
 }

components/dash-core-components/src/components/css/dropdown.css

@@ -0,0 +1,42 @@
+.dash-options-list-option {
+    padding: var(--Dash-Spacing) 0;
+    background: var(--Dash-Fill-Inverse-strong);
+    color: var(--Dash-Text-Strong);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    user-select: none;
+    overflow: hidden;
+}
+
+.dash-options-list-option:not(:has(input[disabled])):hover,
+.dash-options-list-option:not(:has(input[disabled])):focus-within {
+    color: var(--Dash-Fill-Interactive-Strong);
+    background: var(--Dash-Fill-Interactive-Weak);
+}
+
+.dash-options-list-option:has(input[disabled]) {
+    color: var(--Dash-Text-Disabled);
+    cursor: not-allowed;
+}
+
+.dash-options-list-option-text {
+    white-space: pre;
+}
+
+.dash-options-list-option-text > * {
+    vertical-align: middle;
+}
+
+.dash-options-list-option-checkbox {
+    display: inline-block;
+    margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
+    box-sizing: border-box;
+    border: 1px solid var(--Dash-Stroke-Strong);
+}
+
+.dash-options-list-option-checkbox:hover,
+.dash-options-list-option-checkbox:focus,
+.dash-options-list-option-checkbox:checked {
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+}