@capyx/components-library 0.0.11 → 0.0.12

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 (4) hide show
  1. package/dist/components/SelectInput.d.ts +5 -1
  2. package/dist/components/SelectInput.d.ts.map +1 -1
  3. package/dist/components/SelectInput.js +30 -8
  4. package/package.json +8 -8
package/dist/components/SelectInput.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { FC } from 'react';
1
+ import type { FC, JSX } from 'react';
2
2
  /**
3
3
  * Props for the SelectInput component
4
4
  */
@@ -23,6 +23,10 @@ export type SelectInputProps = {
23
23
  required?: boolean;
24
24
  /** Array of option values to display in bold */
25
25
  highlightValues?: string[];
26
+ /** Function to render the option elements */
27
+ renderOption?: (option: string, optionKey: string, isHighlighted: boolean) => JSX.Element;
28
+ /** Sort options in ascending or descending order (default: "desc") */
29
+ sortOptions?: 'asc' | 'desc' | 'highlight-asc' | 'highlight-desc';
26
30
  };
27
31
  /**
28
32
  * SelectInput - A dropdown select component with react-hook-form integration
package/dist/components/SelectInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../lib/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAI7C;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuF5C,CAAC"}
1
+ {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../lib/components/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1F,sEAAsE;IACtE,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,GAAG,gBAAgB,CAAC;CAClE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+G5C,CAAC"}
package/dist/components/SelectInput.js CHANGED
@@ -27,7 +27,7 @@ import { Controller, useFormContext } from 'react-hook-form';
27
27
  * />
28
28
  * ```
29
29
  */
30
- export const SelectInput = ({ name, label, options = [], helpText = 'Select...', controlSize, value, onChange, disabled = false, required = false, highlightValues = [], }) => {
30
+ export const SelectInput = ({ name, label, options = [], helpText = 'Select...', controlSize, value, onChange, disabled = false, required = false, highlightValues = [], renderOption, sortOptions = 'desc' }) => {
31
31
  const formContext = useFormContext();
32
32
  const getFieldError = (fieldName) => {
33
33
  try {
@@ -43,13 +43,35 @@ export const SelectInput = ({ name, label, options = [], helpText = 'Select...',
43
43
  const handleSelectChange = (event) => {
44
44
  onChange?.(event.currentTarget.value);
45
45
  };
46
- const renderOptions = () => (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: helpText.trim() }), options.map((option) => {
47
- const style = highlightValues.includes(option)
48
- ? { fontWeight: 'bold' }
49
- : {};
50
- const key = option.replace(/ /g, '');
51
- return (_jsx("option", { style: style, value: key, children: option.trim() }, key));
52
- })] }));
46
+ const renderOptionInternal = renderOption || ((option, optionKey, isHighlighted) => {
47
+ return (_jsx("option", { style: isHighlighted ? { fontWeight: 'bold' } : {}, value: optionKey, children: option }, optionKey));
48
+ });
49
+ const renderOptions = () => (_jsxs(_Fragment, { children: [_jsx("option", { value: "", children: helpText.trim() }), options
50
+ .sort((a, b) => {
51
+ const aHighlighted = highlightValues.includes(a);
52
+ const bHighlighted = highlightValues.includes(b);
53
+ switch (sortOptions) {
54
+ case 'asc':
55
+ return a.localeCompare(b);
56
+ case 'desc':
57
+ return b.localeCompare(a);
58
+ case 'highlight-asc':
59
+ if (aHighlighted && !bHighlighted)
60
+ return -1;
61
+ if (!aHighlighted && bHighlighted)
62
+ return 1;
63
+ return a.localeCompare(b);
64
+ case 'highlight-desc':
65
+ if (aHighlighted && !bHighlighted)
66
+ return -1;
67
+ if (!aHighlighted && bHighlighted)
68
+ return 1;
69
+ return b.localeCompare(a);
70
+ default:
71
+ return 0;
72
+ }
73
+ })
74
+ .map((option) => renderOptionInternal(option, option.replace(/ /g, ''), highlightValues.includes(option)))] }));
53
75
  // Integrated with react-hook-form
54
76
  if (formContext) {
55
77
  return (_jsx(Controller, { name: name, control: formContext.control, rules: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@capyx/components-library",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "description": "Capyx Components Library for forms across applications",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -52,20 +52,20 @@
52
52
  "devDependencies": {
53
53
  "@biomejs/biome": "^2.4.4",
54
54
  "@chromatic-com/storybook": "^5.0.1",
55
- "@storybook/addon-a11y": "^10.2.10",
56
- "@storybook/addon-docs": "^10.2.10",
57
- "@storybook/addon-onboarding": "^10.2.10",
58
- "@storybook/addon-vitest": "^10.2.10",
59
- "@storybook/react-vite": "^10.2.10",
55
+ "@storybook/addon-a11y": "^10.2.13",
56
+ "@storybook/addon-docs": "^10.2.13",
57
+ "@storybook/addon-onboarding": "^10.2.13",
58
+ "@storybook/addon-vitest": "^10.2.13",
59
+ "@storybook/react-vite": "^10.2.13",
60
60
  "@types/dateformat": "^5.0.3",
61
61
  "@types/lodash.debounce": "^4.0.9",
62
- "@types/node": "^25.3.0",
62
+ "@types/node": "^25.3.3",
63
63
  "@types/react": "^19.2.14",
64
64
  "@types/react-datepicker": "^7.0.0",
65
65
  "@vitest/browser-playwright": "^4.0.18",
66
66
  "@vitest/coverage-v8": "^4.0.18",
67
67
  "playwright": "^1.58.2",
68
- "storybook": "^10.2.10",
68
+ "storybook": "^10.2.13",
69
69
  "typescript": "^5.9.3",
70
70
  "vitest": "^4.0.18"
71
71
  },