@tribepad/themis 1.11.2 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribepad/themis",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "description": "Accessible React component library built on React Aria primitives",
   "author": "Tribepad <mbasford@tribepad.com>",
   "license": "MIT",

package/src/elements/Filters/Filters.stories.tsx

@@ -37,6 +37,24 @@ const postedPresets: FilterOption[] = [
   { value: '30d', label: 'Last 30 days' },
 ];
 
+// Long lists to demonstrate the popover's height cap + internal scrolling.
+const countryOptions: FilterOption[] = [
+  'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada', 'Chile',
+  'China', 'Colombia', 'Denmark', 'Egypt', 'Finland', 'France', 'Germany',
+  'Greece', 'India', 'Indonesia', 'Ireland', 'Israel', 'Italy', 'Japan',
+  'Kenya', 'Malaysia', 'Mexico', 'Netherlands', 'New Zealand', 'Nigeria',
+  'Norway', 'Poland', 'Portugal', 'Singapore', 'South Africa', 'South Korea',
+  'Spain', 'Sweden', 'Switzerland', 'Thailand', 'Turkey', 'Ukraine',
+  'United Arab Emirates', 'United Kingdom', 'United States', 'Vietnam',
+].map((label) => ({ value: label.toLowerCase().replace(/\s+/g, '-'), label }));
+
+const skillOptions: FilterOption[] = [
+  'Accessibility', 'Android', 'Angular', 'AWS', 'C#', 'C++', 'CSS', 'Docker',
+  'Figma', 'Go', 'GraphQL', 'HTML', 'iOS', 'Java', 'JavaScript', 'Kotlin',
+  'Kubernetes', 'Node.js', 'PHP', 'PostgreSQL', 'Python', 'React', 'React Native',
+  'Ruby', 'Rust', 'SQL', 'Swift', 'Terraform', 'TypeScript', 'Vue',
+].map((label) => ({ value: label.toLowerCase().replace(/[.\s]+/g, '-'), label }));
+
 const meta = {
   title: 'Elements/Filters',
   component: Filters,
@@ -112,6 +130,32 @@ export const AsyncCombobox: Story = {
   },
 };
 
+/**
+ * Long option list — a filter with far more options than fit on screen. The
+ * popover caps its height to the viewport and scrolls its body internally, so
+ * every option stays reachable instead of the list running off the page. For
+ * multi-select the "Done" header stays pinned above the scroll region.
+ *
+ * Open **Country** (single-select) or **Skills** (multi-select) to see it.
+ */
+export const LongOptionList: Story = {
+  render: function LongOptionListStory(): ReactElement {
+    const [values, setValues] = useState<FilterValues>({});
+    return (
+      <Filters
+        values={values}
+        onChange={setValues}
+        labels={{ done: 'Done', clear: 'Clear' }}
+        aria-label="Filter candidates"
+      >
+        <FilterSelect name="country" label="Country" options={countryOptions} />
+        <FilterMulti name="skills" label="Skills" options={skillOptions} />
+        <FilterChips clearAllLabel="Clear all" removeChipLabel={(label) => `Remove ${label}`} />
+      </Filters>
+    );
+  },
+};
+
 /**
  * Mobile (narrow) — the bar collapses to a "Filters" button that opens a
  * bottom-sheet of stacked controls; chips scroll horizontally. Pass `narrow`