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

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.

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'