@capillarytech/blaze-ui 2.4.0 → 2.4.1-beta.1

package/dist/CapSelectFilter/CapSelectFilter.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CapSelectFilterMenuItem, CapSelectFilterProps } from './CapSelectFilter.interfaces';
+export declare const renderMenuItem: (items: CapSelectFilterMenuItem[], selectedValue?: string) => {
+    key: string;
+    label: import("react/jsx-runtime").JSX.Element;
+    className: string;
+    'data-value': string;
+}[];
+export declare const renderDropdownMenu: (menu: React.ReactNode, dropdownMaxHeight?: string, dropdownWidth?: string) => import("react/jsx-runtime").JSX.Element;
+declare const CapSelectFilter: React.FC<CapSelectFilterProps>;
+export default CapSelectFilter;
+//# sourceMappingURL=CapSelectFilter.d.ts.map

package/dist/CapSelectFilter/CapSelectFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapSelectFilter.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/CapSelectFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAOlG,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0DnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/CapSelectFilter/CapSelectFilter.interfaces.d.ts

@@ -0,0 +1,22 @@
+import { DropdownProps } from 'antd-v5';
+import React from 'react';
+export interface CapSelectFilterMenuItem {
+    key: string;
+    value: string;
+    label: string | React.ReactNode;
+}
+export interface CapSelectFilterProps extends Omit<DropdownProps, 'menu' | 'overlay' | 'overlayStyle' | 'onOpenChange'> {
+    className?: string;
+    overlayClassName?: string;
+    onSelect?: (event: React.MouseEvent<HTMLElement>) => void;
+    onOpenChange?: (open: boolean) => void;
+    selectedValue?: string;
+    placeholder?: string | React.ReactNode;
+    placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+    width?: string;
+    dropdownMaxHeight?: string;
+    dropdownWidth?: string;
+    data?: CapSelectFilterMenuItem[];
+    showBadge?: boolean;
+}
+//# sourceMappingURL=CapSelectFilter.interfaces.d.ts.map

package/dist/CapSelectFilter/CapSelectFilter.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapSelectFilter.interfaces.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/CapSelectFilter.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/CapSelectFilter/README.md

@@ -0,0 +1,121 @@
+# CapSelectFilter
+
+A dropdown select filter component with badge support.
+
+## Migration from cap-ui-library to blaze-ui
+
+### Summary of Changes
+
+This component has been migrated from `cap-ui-library` to `blaze-ui` with the following updates:
+
+1. **Converted to TypeScript** - Full type safety with proper interfaces
+2. **Functional Component** - Migrated from functional component (no changes needed)
+3. **SCSS Modules** - Replaced styled-components with SCSS modules
+4. **Ant Design v6** - Updated to use Ant Design v6 compatible APIs:
+   - Changed from `overlay` prop to `menu={{ items }}` API
+   - Used `dropdownRender` to wrap menu with custom styling
+   - Removed direct usage of `CapMenu` components in favor of menu items array
+5. **CSS Units** - Converted all pixel values to rem units (base: 14px = 1rem)
+6. **SCSS Variables** - Replaced hardcoded colors/spacing with SCSS variables
+7. **React Hooks** - Added `useMemo` to optimize menu items generation
+
+### Breaking Changes
+
+**No breaking changes from cap-ui-library v8.x**
+
+All props remain the same and work identically to the cap-ui-library version.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS class for the dropdown wrapper |
+| `overlayClassName` | `string` | - | Additional CSS class for the dropdown overlay |
+| `onSelect` | `(event: React.MouseEvent<HTMLElement>) => void` | - | Callback when a menu item is selected |
+| `selectedValue` | `string` | - | Currently selected value |
+| `placeholder` | `React.ReactNode` | - | Placeholder text or node |
+| `placement` | `'bottomLeft' \| 'bottom' \| 'bottomRight' \| 'topLeft' \| 'top' \| 'topRight'` | `'bottomLeft'` | Dropdown placement |
+| `width` | `string` | `'80px'` | Width of the trigger element |
+| `dropdownMaxHeight` | `string` | `'320px'` | Maximum height of dropdown menu |
+| `dropdownWidth` | `string` | `'228px'` | Width of dropdown menu |
+| `data` | `CapSelectFilterMenuItem[]` | `[]` | Array of menu items |
+| `showBadge` | `boolean` | `false` | Whether to show a badge with count |
+
+### Data Item Structure
+
+```typescript
+interface CapSelectFilterMenuItem {
+  key: string;      // Unique key for React
+  value: string;    // Value to match against selectedValue
+  label: React.ReactNode;  // Display label
+}
+```
+
+### API Changes
+
+None - all APIs remain backward compatible.
+
+### Behavioral Changes
+
+None - component behaves identically to cap-ui-library version.
+
+### Migration Guide for Consumers
+
+No migration needed! Simply update your import path:
+
+**Before (cap-ui-library):**
+```javascript
+import CapSelectFilter from '@capillarytech/cap-ui-library/components/CapSelectFilter';
+```
+
+**After (blaze-ui):**
+```javascript
+import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
+// Or from the main export
+import { CapSelectFilter } from '@capillarytech/blaze-ui';
+```
+
+### Usage Example
+
+```tsx
+import React, { useState } from 'react';
+import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
+
+const MyComponent = () => {
+  const [selectedValue, setSelectedValue] = useState('option1');
+
+  const data = [
+    { key: '1', value: 'option1', label: 'Option 1' },
+    { key: '2', value: 'option2', label: 'Option 2' },
+    { key: '3', value: 'option3', label: 'Option 3' },
+  ];
+
+  const handleSelect = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.currentTarget;
+    const value = target.getAttribute('value');
+    if (value) {
+      setSelectedValue(value);
+    }
+  };
+
+  return (
+    <CapSelectFilter
+      placeholder="Select an option"
+      data={data}
+      selectedValue={selectedValue}
+      onSelect={handleSelect}
+      showBadge
+    />
+  );
+};
+```
+
+### Internal Implementation Notes
+
+- Uses `CapDropdown` with Ant Design v6 `menu` API (not the old `overlay` API)
+- Menu items are generated as an array of objects with `key`, `label`, `className`, and `onClick`
+- Uses `dropdownRender` to wrap the menu with custom styling (border and scrolling)
+- Styled with SCSS modules instead of styled-components
+- All spacing and colors use SCSS variables from `components/styled/variables.scss`
+- Badge count is calculated as `[selectedValue].length` (always shows 1 for single selection)
+- Uses `useMemo` to optimize menu items generation and prevent unnecessary re-renders

package/dist/CapSelectFilter/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './CapSelectFilter';
+export type { CapSelectFilterProps, CapSelectFilterMenuItem } from './CapSelectFilter.interfaces';
+//# sourceMappingURL=index.d.ts.map

package/dist/CapSelectFilter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC"}