RubyGems - playbook_ui - Versions diffs - 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216 - Mend

playbook_ui 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4098 → 14.5.0.pre.alpha.PLAY1485selectablecardoverflowoutlinebug4216

Files changed (82) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9228103de6d01a84145169d2ad394bf2c6b3b6df7ec0e3b16cfe518a803f579
-  data.tar.gz: 257b1a1fdd3adc9310b52b8e513b2fe3e9974cf4429a2ae719aa8e247c74a2ce
+  metadata.gz: 387ed5f85511c8d3c7662523f280c230211f92f5d601045a5548cb1e946d0403
+  data.tar.gz: fc8c6544e1bc3a338c07200a9d4c3b1b2423b0dd4a68644e29523f91414580f8
 SHA512:
-  metadata.gz: 925407457e1d6d8ce1c3a6012bf084ef8721040ce76e5432978a7407d1d80769126a4ea24c089bef72a4cd6af4eafe15fc86ae997d7f9b88338de01d144c43cf
-  data.tar.gz: 79f269ceeb505d1f9b200d1088d6db340acc6a3be267f8e9fe777eb8e2e121089361729fd156df2a37535bf27a020f282d5aad6b9a3cecb5d53e4add11e93a9e
+  metadata.gz: e6c41d3c8ea88e41b965797d2babde70c3753449c888c51c40cbd6d9319c4127a387ad4eb9ec0e4293ab161af43522d2b1e028fbcc704f1ff7de21023793dc4c
+  data.tar.gz: e51dd0fde49820c22978dfa09e51f6ab85c9f1fdaa915fdda6645c50c7b1696417e7f5dd7d4e64f3052ba344dd17d2fa7dc9a865d6f5f70256edeb8a8d0a7160

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx CHANGED Viewed

@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const columnHelper = createColumnHelper()
   //Create cells for first columns
-  const createCellFunction = (cellAccessors: string[]) => {
+  const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
     const columnCells = ({
       row,
       getValue,
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }) => {
       const rowData = row.original
+    // Use customRenderer if provided, otherwise default rendering
+    if (customRenderer) {
+      return customRenderer(row, getValue())
+    }
       switch (row.depth) {
         case 0: {
           return (
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+      columnDefinitions.map((column, index) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.label,
         }),
       }
-      if (column.cellAccessors) {
-        columnStructure.cell = createCellFunction(column.cellAccessors)
-      }
-      return columnStructure
-    })
+  // Use the custom renderer if provided, EXCEPT for the first column
+  if (index !== 0) {
+    if (column.cellAccessors || column.customRenderer) {
+      columnStructure.cell = createCellFunction(
+        column.cellAccessors,
+        column.customRenderer
+      )
+    }
+  } else {
+    // For the first column, apply createCellFunction without customRenderer
+    if (column.cellAccessors) {
+      columnStructure.cell = createCellFunction(column.cellAccessors)
+    }
+  }
+  return columnStructure
+})
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React from "react"
+import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+const AdvancedTableCustomCell = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      customRenderer: (row, value) => (
+        <Pill text={value}
+            variant="success"
+        />
+      ),
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      customRenderer: (row, value) => (
+        <Flex alignItems="end"
+            orientation="column"
+        >
+          <Detail bold
+              color="default"
+              text={value}
+          />
+          <Caption size="xs">{row.original.graduatedStudents}</Caption>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header enableSorting />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+export default AdvancedTableCustomCell

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md ADDED Viewed

@@ -0,0 +1,5 @@
+The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
+See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
+See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED Viewed

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_beta_sort: Enable Sorting
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
@@ -15,3 +16,4 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_custom_cell: Custom Components for Cells

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED Viewed

@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
 export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
 export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
+export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'

data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { GlobalProps, globalProps } from '../utilities/globalProps'
+import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
   padding?: string,
 } & GlobalProps
 // Header component
 const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   // coerce to array
   const cardChildren = React.Children.toArray(children)
+  const dynamicInlineProps = globalInlineProps(props);
   const subComponentTags = (tagName: string) => {
     return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classnames(cardCss, globalProps(props), className)}
+            style={dynamicInlineProps}
         >
           {subComponentTags('Header')}
           {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               {...htmlProps}
               className={classnames(cardCss, globalProps(props), className)}
+              style={dynamicInlineProps}
             >
               {subComponentTags('Header')}
               {nonHeaderChildren}

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import classnames from "classnames";
 import Modal from "react-modal";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { globalProps } from "../utilities/globalProps";
+import { globalProps, globalInlineProps } from "../utilities/globalProps";
 import Body from "../pb_body/_body";
 import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
     beforeClose: "pb_dialog_overlay_before_close",
   };
+  const dynamicInlineProps = globalInlineProps(props);
   const classes = classnames(
     buildCss("pb_dialog_wrapper"),
     globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             overlayClassName={overlayClassNames}
             portalClassName={portalClassName}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
+            style={{ content: dynamicInlineProps }}
         >
           <>
             {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
               <Dialog.Body
                   className="dialog_status_text_align"
                   padding="md"
               >
                 <Flex align="center"
                     orientation="column"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb CHANGED Viewed

@@ -1,13 +1,36 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-loading"} }) %>
-<%= pb_rails("dialog", props: {
-    id:"dialog-loading",
-    size: "sm",
-    title: "Loading Exmaple",
-    text: "Make a loading request?",
-    cancel_button: "Cancel Button",
+<%= pb_rails("dialog", props: {
+    id:"dialog-loading",
+    size: "sm",
+    title: "Loading Example",
+    text: "Make a loading request?",
+    cancel_button: "Cancel Button",
     cancel_button_id: "cancel-button-loading",
-    confirm_button: "Okay",
+    confirm_button: "Okay",
     confirm_button_id: "confirm-button-loading",
     loading: true,
 }) %>
+<script>
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+        loadingButton.addEventListener("click", function() {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+        setTimeout(function() {
+            okayLoadingButton.disabled = false;
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+            if (cancelButton) {
+            cancelButton.disabled = false;
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            }
+        }, 5000);
+        });
+  }
+</script>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md CHANGED Viewed

@@ -1,3 +1 @@
 Pressing the "Okay" button will trigger a loading state where the button content is replaced by a spinner icon and both buttons are disabled.
-Currently, the loading state cannot be undone and will require a page refresh to reset the dialog.

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED Viewed

@@ -69,15 +69,21 @@
         padding-bottom: $space_xs;
         cursor: pointer;
         &:hover {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
         &[class*="_focused"] {
-          background-color: $border_light;
+          background-color: $bg_light;
         }
         &[class*="_list"] {
           border-bottom: 1px solid $border_light;
+          &:hover, &:focus {
+            .pb_body_kit {
+              color: $primary;
+            }
+          }
         }
         &[class*="selected"] {
           background-color: $primary;
@@ -87,7 +93,7 @@
             color: $white !important;
           }
           &:hover {
-            background-color: $primary !important;
+            background-color: $product_1_background !important;
           }
         }
       }
@@ -125,6 +131,81 @@
     }
   }
+  &.separators_hidden {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        [class*="pb_dropdown_option"] {
+          border: none;
+        }
+      }
+    }
+  }
+  &.subtle {
+    .dropdown_wrapper {
+      .pb_dropdown_container {
+        [class*="pb_dropdown_option"]:first-child {
+          margin-top: $space_xs;
+        }
+        [class*="pb_dropdown_option"]:last-child {
+          margin-bottom: $space_xs;
+        }
+        [class*="pb_dropdown_option"] {
+          margin: $space_xs;
+          padding: $space_xs;
+          border-radius: $border_radius_md;
+          border-bottom: none;
+          position: relative;
+          &::after {
+            content: "";
+            position: absolute;
+            left: -$space_xs;
+            right: -$space_xs;
+            bottom: -4.5px;
+            height: 1px;
+            background: $border_light;
+          }
+        }
+        [class*="pb_dropdown_option"]:last-child::after {
+          display: none;
+        }
+      }
+    }
+    &.separators_hidden {
+      .dropdown_wrapper {
+        .pb_dropdown_container {
+          [class*="pb_dropdown_option"]:first-child {
+            margin-top: $space_xs;
+          }
+          [class*="pb_dropdown_option"]:last-child {
+            margin-bottom: $space_xs;
+          }
+          [class*="pb_dropdown_option"] {
+            padding: $space_xxs $space_xs;
+            margin: $space_xxs $space_xs;
+            &::after {
+              height: 0px;
+            }
+            &[class*="selected"] {
+              border-bottom: none;
+            }
+          }
+        }
+      }
+    }
+  }
   &.dark {
     .dropdown_wrapper {
       [class*="dropdown_trigger_wrapper"] {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
@@ -35,10 +35,19 @@ type DropdownProps = {
     label?: string;
     onSelect?: (arg: GenericObject) => null;
     options: GenericObject;
+    separators: boolean;
     triggerRef?: any;
+    variant?: "default" | "subtle";
 };
-const Dropdown = (props: DropdownProps) => {
+interface DropdownComponent
+    extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
+    Option: typeof DropdownOption;
+    Trigger: typeof DropdownTrigger;
+    Container: typeof DropdownContainer;
+}
+const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
     const {
         aria = {},
         autocomplete = false,
@@ -55,15 +64,20 @@ const Dropdown = (props: DropdownProps) => {
         label,
         onSelect,
         options,
-        triggerRef
+        separators = true,
+        triggerRef,
+        variant = "default",
     } = props;
     const ariaProps = buildAriaProps(aria);
     const dataProps = buildDataProps(data);
     const htmlProps = buildHtmlProps(htmlOptions);
+    const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown"),
         globalProps(props),
+        variant,
+        separatorsClass,
         className
     );
@@ -125,7 +139,7 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });
+    });
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -175,6 +189,14 @@ const Dropdown = (props: DropdownProps) => {
         dark
     });
+    useImperativeHandle(ref, () => ({
+        clearSelected: () => {
+            setSelected({});
+            setFilterItem("");
+            setIsDropDownClosed(true);
+            onSelect && onSelect(null);
+        },
+    }));
     return (
         <div {...ariaProps}
@@ -258,8 +280,9 @@ const Dropdown = (props: DropdownProps) => {
             </DropdownContext.Provider>
         </div>
     )
-};
+}) as DropdownComponent
+Dropdown.displayName = "Dropdown";
 Dropdown.Option = DropdownOption;
 Dropdown.Trigger = DropdownTrigger;
 Dropdown.Container = DropdownContainer;

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx ADDED Viewed

@@ -0,0 +1,45 @@
+import React, { useRef } from 'react'
+import { Button, Dropdown } from 'playbook-ui'
+const options = [
+    {
+        label: "United States",
+        value: "United States",
+    },
+    {
+        label: "Canada",
+        value: "Canada",
+    },
+    {
+        label: "Pakistan",
+        value: "Pakistan",
+    }
+]
+const DropdownClearSelection = (props) => {
+    const dropdownRef = useRef(null)
+    const handleReset = () => {
+        if (dropdownRef.current) {
+            dropdownRef.current.clearSelected()
+        }
+    }
+    return (
+        <>
+            <Dropdown
+                defaultValue={options[2]}
+                options={options}
+                ref={dropdownRef}
+                {...props}
+            />
+            <Button
+                marginTop="md"
+                onClick={handleReset}
+                text="Reset"
+            />
+        </>
+    )
+}
+export default DropdownClearSelection

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb ADDED Viewed

@@ -0,0 +1,9 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: {options: options, separators: false}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+const DropdownSeparatorsHidden = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        options={options}
+        separators={false}
+        {...props}
+    />
+  </div>
+  )
+}
+export default DropdownSeparatorsHidden

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb ADDED Viewed

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+%>
+<%= pb_rails("dropdown", props: { options: options, variant: "subtle", separators: false }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Dropdown } from 'playbook-ui'
+const DropdownSubtleVariant = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <>
+     <Dropdown
+         options={options}
+         separators={false}
+         variant="subtle"
+         {...props}
+    />
+  </>
+  )
+}
+export default DropdownSubtleVariant

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -1,6 +1,7 @@
 examples:
   rails:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
@@ -10,9 +11,11 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_separators_hidden: Separators Hidden
   react:
   - dropdown_default: Default
+  - dropdown_subtle_variant: Subtle Variant
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
@@ -22,6 +25,8 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_blank_selection: Blank Selection
+  - dropdown_clear_selection: Clear Selection
+  - dropdown_separators_hidden: Separators Hidden
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED Viewed

@@ -12,3 +12,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
+export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
+export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'