@addsign/moje-agenda-shared-lib 2.0.48 → 2.0.50

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 (12) hide show
  1. package/dist/components/datatable/DataTableServer.d.ts +2 -1
  2. package/dist/components/datatable/DataTableServer.js +3 -1
  3. package/dist/components/datatable/DataTableServer.js.map +1 -1
  4. package/dist/components/datatable/Resizable.d.ts +2 -1
  5. package/dist/components/datatable/Resizable.js +11 -1
  6. package/dist/components/datatable/Resizable.js.map +1 -1
  7. package/dist/components/ui/multi-select.js +2 -2
  8. package/dist/components/ui/multi-select.js.map +1 -1
  9. package/lib/components/datatable/DataTableServer.tsx +3 -0
  10. package/lib/components/datatable/Resizable.tsx +11 -0
  11. package/lib/components/ui/multi-select.tsx +3 -2
  12. package/package.json +1 -1
package/dist/components/datatable/Resizable.d.ts CHANGED
@@ -3,6 +3,7 @@ interface IResizableProps {
3
3
  colKey: string;
4
4
  children: any;
5
5
  defaultWidth: string;
6
+ setMinWidth?: boolean;
6
7
  }
7
- export declare const Resizable: ({ tableId, colKey, defaultWidth, children, }: IResizableProps) => any;
8
+ export declare const Resizable: ({ tableId, colKey, defaultWidth, children, setMinWidth, }: IResizableProps) => any;
8
9
  export {};
package/dist/components/datatable/Resizable.js CHANGED
@@ -3,7 +3,8 @@ const Resizable = ({
3
3
  tableId,
4
4
  colKey,
5
5
  defaultWidth,
6
- children
6
+ children,
7
+ setMinWidth = false
7
8
  }) => {
8
9
  const [node, setNode] = React__default.useState(null);
9
10
  const [width, setWidth] = useState(() => {
@@ -41,6 +42,9 @@ const Resizable = ({
41
42
  const dx = e2.clientX - startPos.x;
42
43
  const newWidth = w + dx + "px";
43
44
  parent == null ? void 0 : parent.style.setProperty("width", newWidth);
45
+ if (setMinWidth) {
46
+ parent == null ? void 0 : parent.style.setProperty("min-width", newWidth);
47
+ }
44
48
  setWidth(newWidth);
45
49
  };
46
50
  const handleMouseUp = () => {
@@ -60,8 +64,14 @@ const Resizable = ({
60
64
  const parent = node.parentElement;
61
65
  if (node.parentNode !== ((_b = (_a = node.parentNode) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.lastChild)) {
62
66
  parent == null ? void 0 : parent.style.setProperty("width", `${width}`);
67
+ if (setMinWidth) {
68
+ parent == null ? void 0 : parent.style.setProperty("min-width", `${width}`);
69
+ }
63
70
  } else {
64
71
  parent == null ? void 0 : parent.style.setProperty("width", `auto`);
72
+ if (setMinWidth) {
73
+ parent == null ? void 0 : parent.style.setProperty("min-width", `auto`);
74
+ }
65
75
  }
66
76
  node.addEventListener("mousedown", handleMouseDown);
67
77
  return () => {
package/dist/components/datatable/Resizable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Resizable.js","sources":["../../../lib/components/datatable/Resizable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\ninterface IResizableProps {\r\n tableId: string;\r\n colKey: string;\r\n children: any;\r\n defaultWidth: string;\r\n}\r\n\r\nexport const Resizable = ({\r\n tableId,\r\n colKey,\r\n defaultWidth,\r\n children,\r\n}: IResizableProps) => {\r\n const [node, setNode] = React.useState<HTMLElement | null>(null);\r\n\r\n const [width, setWidth] = useState(() => {\r\n const storageKey = `datatable:${tableId}`;\r\n const storedData = localStorage.getItem(storageKey);\r\n const data = storedData ? JSON.parse(storedData) : {};\r\n\r\n const columnWidths = data.columnWidths || {};\r\n const storedWidth = columnWidths[colKey];\r\n return storedWidth ? storedWidth : defaultWidth;\r\n });\r\n\r\n //storing sizes\r\n useEffect(() => {\r\n const storageKey = `datatable:${tableId}`;\r\n const storedData = localStorage.getItem(storageKey);\r\n const data = storedData ? JSON.parse(storedData) : {};\r\n\r\n data.columnWidths = data.columnWidths || {};\r\n data.columnWidths[colKey] = width;\r\n\r\n localStorage.setItem(storageKey, JSON.stringify(data));\r\n }, [width, tableId, colKey, defaultWidth]);\r\n\r\n const ref = React.useCallback((nodeEle: HTMLElement) => {\r\n setNode(nodeEle);\r\n }, []);\r\n\r\n const handleMouseDown = React.useCallback(\r\n (e: MouseEvent) => {\r\n if (!node) {\r\n return;\r\n }\r\n\r\n const parent = node.parentElement;\r\n const startPos = {\r\n x: e.clientX,\r\n y: e.clientY,\r\n };\r\n // const styles = window.getComputedStyle(parent);\r\n const styles = parent ? window.getComputedStyle(parent) : null;\r\n\r\n const w = parseInt(styles?.width || \"0\", 10);\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n const dx = e.clientX - startPos.x;\r\n const newWidth = w + dx + \"px\";\r\n\r\n parent?.style.setProperty(\"width\", newWidth);\r\n setWidth(newWidth);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n };\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n },\r\n [node]\r\n );\r\n\r\n React.useEffect(() => {\r\n if (!node) {\r\n return;\r\n }\r\n\r\n const parent = node.parentElement;\r\n if (node.parentNode !== node.parentNode?.parentNode?.lastChild) {\r\n parent?.style.setProperty(\"width\", `${width}`);\r\n } else {\r\n parent?.style.setProperty(\"width\", `auto`);\r\n }\r\n\r\n node.addEventListener(\"mousedown\", handleMouseDown);\r\n\r\n return () => {\r\n node.removeEventListener(\"mousedown\", handleMouseDown);\r\n };\r\n }, [node, handleMouseDown, tableId]);\r\n\r\n return children({ ref });\r\n};\r\n"],"names":["React","e"],"mappings":";AASO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAA6B,IAAI;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AACjC,UAAA,aAAa,aAAa,OAAO;AACjC,UAAA,aAAa,aAAa,QAAQ,UAAU;AAClD,UAAM,OAAO,aAAa,KAAK,MAAM,UAAU,IAAI;AAE7C,UAAA,eAAe,KAAK,gBAAgB;AACpC,UAAA,cAAc,aAAa,MAAM;AACvC,WAAO,cAAc,cAAc;AAAA,EAAA,CACpC;AAGD,YAAU,MAAM;AACR,UAAA,aAAa,aAAa,OAAO;AACjC,UAAA,aAAa,aAAa,QAAQ,UAAU;AAClD,UAAM,OAAO,aAAa,KAAK,MAAM,UAAU,IAAI;AAE9C,SAAA,eAAe,KAAK,gBAAgB,CAAA;AACpC,SAAA,aAAa,MAAM,IAAI;AAE5B,iBAAa,QAAQ,YAAY,KAAK,UAAU,IAAI,CAAC;AAAA,KACpD,CAAC,OAAO,SAAS,QAAQ,YAAY,CAAC;AAEzC,QAAM,MAAMA,eAAM,YAAY,CAAC,YAAyB;AACtD,YAAQ,OAAO;AAAA,EACjB,GAAG,CAAE,CAAA;AAEL,QAAM,kBAAkBA,eAAM;AAAA,IAC5B,CAAC,MAAkB;AACjB,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AAEA,YAAM,SAAS,KAAK;AACpB,YAAM,WAAW;AAAA,QACf,GAAG,EAAE;AAAA,QACL,GAAG,EAAE;AAAA,MAAA;AAGP,YAAM,SAAS,SAAS,OAAO,iBAAiB,MAAM,IAAI;AAE1D,YAAM,IAAI,UAAS,iCAAQ,UAAS,KAAK,EAAE;AAErC,YAAA,kBAAkB,CAACC,OAAkB;AACnC,cAAA,KAAKA,GAAE,UAAU,SAAS;AAC1B,cAAA,WAAW,IAAI,KAAK;AAElB,yCAAA,MAAM,YAAY,SAAS;AACnC,iBAAS,QAAQ;AAAA,MAAA;AAGnB,YAAM,gBAAgB,MAAM;AACjB,iBAAA,oBAAoB,aAAa,eAAe;AAChD,iBAAA,oBAAoB,WAAW,aAAa;AAAA,MAAA;AAG9C,eAAA,iBAAiB,aAAa,eAAe;AAC7C,eAAA,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAAA,IACA,CAAC,IAAI;AAAA,EAAA;AAGPD,iBAAM,UAAU,MAAM;;AACpB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,UAAM,SAAS,KAAK;AACpB,QAAI,KAAK,iBAAe,gBAAK,eAAL,mBAAiB,eAAjB,mBAA6B,YAAW;AAC9D,uCAAQ,MAAM,YAAY,SAAS,GAAG,KAAK;AAAA,IAAE,OACxC;AACG,uCAAA,MAAM,YAAY,SAAS;AAAA,IACrC;AAEK,SAAA,iBAAiB,aAAa,eAAe;AAElD,WAAO,MAAM;AACN,WAAA,oBAAoB,aAAa,eAAe;AAAA,IAAA;AAAA,EAEtD,GAAA,CAAC,MAAM,iBAAiB,OAAO,CAAC;AAE5B,SAAA,SAAS,EAAE,IAAA,CAAK;AACzB;"}
1
+ {"version":3,"file":"Resizable.js","sources":["../../../lib/components/datatable/Resizable.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\n\r\ninterface IResizableProps {\r\n tableId: string;\r\n colKey: string;\r\n children: any;\r\n defaultWidth: string;\r\n setMinWidth?: boolean;\r\n}\r\n\r\nexport const Resizable = ({\r\n tableId,\r\n colKey,\r\n defaultWidth,\r\n children,\r\n setMinWidth = false,\r\n}: IResizableProps) => {\r\n const [node, setNode] = React.useState<HTMLElement | null>(null);\r\n\r\n const [width, setWidth] = useState(() => {\r\n const storageKey = `datatable:${tableId}`;\r\n const storedData = localStorage.getItem(storageKey);\r\n const data = storedData ? JSON.parse(storedData) : {};\r\n\r\n const columnWidths = data.columnWidths || {};\r\n const storedWidth = columnWidths[colKey];\r\n return storedWidth ? storedWidth : defaultWidth;\r\n });\r\n\r\n //storing sizes\r\n useEffect(() => {\r\n const storageKey = `datatable:${tableId}`;\r\n const storedData = localStorage.getItem(storageKey);\r\n const data = storedData ? JSON.parse(storedData) : {};\r\n\r\n data.columnWidths = data.columnWidths || {};\r\n data.columnWidths[colKey] = width;\r\n\r\n localStorage.setItem(storageKey, JSON.stringify(data));\r\n }, [width, tableId, colKey, defaultWidth]);\r\n\r\n const ref = React.useCallback((nodeEle: HTMLElement) => {\r\n setNode(nodeEle);\r\n }, []);\r\n\r\n const handleMouseDown = React.useCallback(\r\n (e: MouseEvent) => {\r\n if (!node) {\r\n return;\r\n }\r\n\r\n const parent = node.parentElement;\r\n const startPos = {\r\n x: e.clientX,\r\n y: e.clientY,\r\n };\r\n // const styles = window.getComputedStyle(parent);\r\n const styles = parent ? window.getComputedStyle(parent) : null;\r\n\r\n const w = parseInt(styles?.width || \"0\", 10);\r\n\r\n const handleMouseMove = (e: MouseEvent) => {\r\n const dx = e.clientX - startPos.x;\r\n const newWidth = w + dx + \"px\";\r\n\r\n parent?.style.setProperty(\"width\", newWidth);\r\n if (setMinWidth) {\r\n parent?.style.setProperty(\"min-width\", newWidth);\r\n }\r\n setWidth(newWidth);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n document.removeEventListener(\"mousemove\", handleMouseMove);\r\n document.removeEventListener(\"mouseup\", handleMouseUp);\r\n };\r\n\r\n document.addEventListener(\"mousemove\", handleMouseMove);\r\n document.addEventListener(\"mouseup\", handleMouseUp);\r\n },\r\n [node]\r\n );\r\n\r\n React.useEffect(() => {\r\n if (!node) {\r\n return;\r\n }\r\n\r\n const parent = node.parentElement;\r\n if (node.parentNode !== node.parentNode?.parentNode?.lastChild) {\r\n parent?.style.setProperty(\"width\", `${width}`);\r\n if (setMinWidth) {\r\n parent?.style.setProperty(\"min-width\", `${width}`);\r\n }\r\n } else {\r\n parent?.style.setProperty(\"width\", `auto`);\r\n if (setMinWidth) {\r\n parent?.style.setProperty(\"min-width\", `auto`);\r\n }\r\n }\r\n\r\n node.addEventListener(\"mousedown\", handleMouseDown);\r\n\r\n return () => {\r\n node.removeEventListener(\"mousedown\", handleMouseDown);\r\n };\r\n }, [node, handleMouseDown, tableId]);\r\n\r\n return children({ ref });\r\n};\r\n"],"names":["React","e"],"mappings":";AAUO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAAuB;AACrB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAA6B,IAAI;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AACjC,UAAA,aAAa,aAAa,OAAO;AACjC,UAAA,aAAa,aAAa,QAAQ,UAAU;AAClD,UAAM,OAAO,aAAa,KAAK,MAAM,UAAU,IAAI;AAE7C,UAAA,eAAe,KAAK,gBAAgB;AACpC,UAAA,cAAc,aAAa,MAAM;AACvC,WAAO,cAAc,cAAc;AAAA,EAAA,CACpC;AAGD,YAAU,MAAM;AACR,UAAA,aAAa,aAAa,OAAO;AACjC,UAAA,aAAa,aAAa,QAAQ,UAAU;AAClD,UAAM,OAAO,aAAa,KAAK,MAAM,UAAU,IAAI;AAE9C,SAAA,eAAe,KAAK,gBAAgB,CAAA;AACpC,SAAA,aAAa,MAAM,IAAI;AAE5B,iBAAa,QAAQ,YAAY,KAAK,UAAU,IAAI,CAAC;AAAA,KACpD,CAAC,OAAO,SAAS,QAAQ,YAAY,CAAC;AAEzC,QAAM,MAAMA,eAAM,YAAY,CAAC,YAAyB;AACtD,YAAQ,OAAO;AAAA,EACjB,GAAG,CAAE,CAAA;AAEL,QAAM,kBAAkBA,eAAM;AAAA,IAC5B,CAAC,MAAkB;AACjB,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AAEA,YAAM,SAAS,KAAK;AACpB,YAAM,WAAW;AAAA,QACf,GAAG,EAAE;AAAA,QACL,GAAG,EAAE;AAAA,MAAA;AAGP,YAAM,SAAS,SAAS,OAAO,iBAAiB,MAAM,IAAI;AAE1D,YAAM,IAAI,UAAS,iCAAQ,UAAS,KAAK,EAAE;AAErC,YAAA,kBAAkB,CAACC,OAAkB;AACnC,cAAA,KAAKA,GAAE,UAAU,SAAS;AAC1B,cAAA,WAAW,IAAI,KAAK;AAElB,yCAAA,MAAM,YAAY,SAAS;AACnC,YAAI,aAAa;AACP,2CAAA,MAAM,YAAY,aAAa;AAAA,QACzC;AACA,iBAAS,QAAQ;AAAA,MAAA;AAGnB,YAAM,gBAAgB,MAAM;AACjB,iBAAA,oBAAoB,aAAa,eAAe;AAChD,iBAAA,oBAAoB,WAAW,aAAa;AAAA,MAAA;AAG9C,eAAA,iBAAiB,aAAa,eAAe;AAC7C,eAAA,iBAAiB,WAAW,aAAa;AAAA,IACpD;AAAA,IACA,CAAC,IAAI;AAAA,EAAA;AAGPD,iBAAM,UAAU,MAAM;;AACpB,QAAI,CAAC,MAAM;AACT;AAAA,IACF;AAEA,UAAM,SAAS,KAAK;AACpB,QAAI,KAAK,iBAAe,gBAAK,eAAL,mBAAiB,eAAjB,mBAA6B,YAAW;AAC9D,uCAAQ,MAAM,YAAY,SAAS,GAAG,KAAK;AAC3C,UAAI,aAAa;AACf,yCAAQ,MAAM,YAAY,aAAa,GAAG,KAAK;AAAA,MACjD;AAAA,IAAA,OACK;AACG,uCAAA,MAAM,YAAY,SAAS;AACnC,UAAI,aAAa;AACP,yCAAA,MAAM,YAAY,aAAa;AAAA,MACzC;AAAA,IACF;AAEK,SAAA,iBAAiB,aAAa,eAAe;AAElD,WAAO,MAAM;AACN,WAAA,oBAAoB,aAAa,eAAe;AAAA,IAAA;AAAA,EAEtD,GAAA,CAAC,MAAM,iBAAiB,OAAO,CAAC;AAE5B,SAAA,SAAS,EAAE,IAAA,CAAK;AACzB;"}
package/dist/components/ui/multi-select.js CHANGED
@@ -218,7 +218,7 @@ const MultiSelect = React.forwardRef(
218
218
  {
219
219
  className: cn(
220
220
  "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
221
- selectedValues.length === options.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
221
+ selectedValues && selectedValues.length === options.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
222
222
  ),
223
223
  children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
224
224
  }
@@ -230,7 +230,7 @@ const MultiSelect = React.forwardRef(
230
230
  ),
231
231
  options.map((option) => {
232
232
  const optionStr = String(option.value);
233
- const isSelected = selectedValues.includes(optionStr);
233
+ const isSelected = (selectedValues == null ? void 0 : selectedValues.includes(optionStr)) || false;
234
234
  return /* @__PURE__ */ jsxs(
235
235
  CommandItem,
236
236
  {
package/dist/components/ui/multi-select.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/circle-x.js","../../../lib/components/ui/multi-select.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CircleX = createLucideIcon(\"CircleX\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"path\", { d: \"m15 9-6 6\", key: \"1uzhvr\" }],\n [\"path\", { d: \"m9 9 6 6\", key: \"z0biqf\" }]\n]);\n\nexport { CircleX as default };\n//# sourceMappingURL=circle-x.js.map\n","// src/components/multi-select.tsx\r\n\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { CheckIcon, XCircle, ChevronDown, XIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"../../utils/utils\";\r\nimport { Separator } from \"./separator\";\r\nimport { Button } from \"./button\";\r\nimport { Badge } from \"./badge\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n} from \"./command\";\r\nimport { IOptionItem } from \"../../types\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = cva(\"m-1 transition ease-in-out delay-150 \", {\r\n variants: {\r\n variant: {\r\n default:\r\n \"border-foreground/10 text-foreground bg-card hover:bg-card/80 font-normal\",\r\n secondary:\r\n \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80 font-normal\",\r\n destructive:\r\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 font-normal\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps\r\n extends Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n \"onChange\" | \"value\"\r\n >,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n */\r\n options: IOptionItem[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onChange: (value: string[]) => void;\r\n\r\n /** The controlled value of the component */\r\n value?: string[];\r\n\r\n /** The default selected values when the component mounts (uncontrolled mode) */\r\n defaultValue?: string[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholderSearch?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be disabled.\r\n * Optional, defaults to false.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * value?: string;\r\n onChange?: (value: string | undefined) => void;\r\n */\r\n}\r\n\r\nexport const MultiSelect = React.forwardRef<\r\n HTMLButtonElement,\r\n MultiSelectProps\r\n>(\r\n (\r\n {\r\n options,\r\n onChange,\r\n value: propValue,\r\n variant,\r\n defaultValue = [],\r\n placeholder = \"Vyberte možnosti\",\r\n placeholderSearch = \"Vyhledejte\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n asChild = false,\r\n className,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>(\r\n propValue ?? defaultValue\r\n );\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n\r\n // Update internal state when controlled value changes\r\n React.useEffect(() => {\r\n if (propValue !== undefined) {\r\n setSelectedValues(propValue);\r\n }\r\n }, [propValue]);\r\n\r\n const handleValueChange = (newValues: string[]) => {\r\n setSelectedValues(newValues);\r\n onChange(newValues);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen((prev) => !prev);\r\n };\r\n\r\n const toggleOption = (option: string | number | null) => {\r\n if (option === null) return;\r\n const optionStr = String(option);\r\n const newSelectedValues = selectedValues.includes(optionStr)\r\n ? selectedValues.filter((value) => value !== optionStr)\r\n : [...selectedValues, optionStr];\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n handleValueChange([]);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.length) {\r\n handleClear();\r\n } else {\r\n const allValues = options.map((option) => option.value as string);\r\n handleValueChange(allValues);\r\n }\r\n };\r\n\r\n return (\r\n <Popover\r\n open={isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n modal={modalPopover}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between hover:bg-inherit [&_svg]:pointer-events-auto font-normal bg-background text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center\">\r\n {maxCount === 0 && selectedValues.length == 1 && (\r\n <span className=\"px-2\">\r\n {\r\n options.find((o) => o.value === selectedValues[0])\r\n ?.label\r\n }\r\n </span>\r\n )}\r\n {maxCount === 0 && selectedValues.length > 1 && (\r\n <span className=\"px-2\">\r\n {`Více (${selectedValues.length})`}\r\n </span>\r\n )}\r\n {maxCount > 0 &&\r\n selectedValues.slice(0, maxCount).map((value) => {\r\n const option = options.find((o) => o.value === value);\r\n return (\r\n <Badge\r\n key={value}\r\n className={cn(multiSelectVariants({ variant }))}\r\n >\r\n {option?.label}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n </Badge>\r\n );\r\n })}\r\n\r\n {maxCount > 0 && selectedValues.length > maxCount && (\r\n <Badge\r\n className={cn(\r\n \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\r\n multiSelectVariants({ variant })\r\n )}\r\n >\r\n {`Více (${selectedValues.length - maxCount})`}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n </div>\r\n <div className=\"flex items-center justify-between\">\r\n <XIcon\r\n className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n />\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-between w-full mx-auto\">\r\n <span className=\"text-sm text-muted-foreground mx-3\">\r\n {placeholder}\r\n </span>\r\n <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\r\n </div>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-auto p-0\"\r\n align=\"start\"\r\n onEscapeKeyDown={() => setIsPopoverOpen(false)}\r\n >\r\n <Command>\r\n <CommandInput\r\n placeholder={placeholderSearch}\r\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (e.key === \"Backspace\" && !e.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n handleValueChange(newSelectedValues);\r\n }\r\n }}\r\n />\r\n <CommandList>\r\n <CommandEmpty>No results found.</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem\r\n key=\"all\"\r\n onSelect={toggleAll}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues.length === options.length\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n <span>(Vyberte vše)</span>\r\n </CommandItem>\r\n {options.map((option) => {\r\n const optionStr = String(option.value);\r\n const isSelected = selectedValues.includes(optionStr);\r\n return (\r\n <CommandItem\r\n key={optionStr}\r\n onSelect={() => toggleOption(option.value)}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n isSelected\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem\r\n onSelect={handleClear}\r\n className=\"flex-1 justify-center cursor-pointer\"\r\n >\r\n Odebrat vše\r\n </CommandItem>\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n </>\r\n )}\r\n <CommandItem\r\n onSelect={() => setIsPopoverOpen(false)}\r\n className=\"flex-1 justify-center cursor-pointer max-w-full\"\r\n >\r\n Zavřít\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n"],"names":["XCircle","XIcon","CheckIcon"],"mappings":"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","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"multi-select.js","sources":["../../../node_modules/lucide-react/dist/esm/icons/circle-x.js","../../../lib/components/ui/multi-select.tsx"],"sourcesContent":["/**\n * @license lucide-react v0.456.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst CircleX = createLucideIcon(\"CircleX\", [\n [\"circle\", { cx: \"12\", cy: \"12\", r: \"10\", key: \"1mglay\" }],\n [\"path\", { d: \"m15 9-6 6\", key: \"1uzhvr\" }],\n [\"path\", { d: \"m9 9 6 6\", key: \"z0biqf\" }]\n]);\n\nexport { CircleX as default };\n//# sourceMappingURL=circle-x.js.map\n","// src/components/multi-select.tsx\r\n\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { CheckIcon, XCircle, ChevronDown, XIcon } from \"lucide-react\";\r\n\r\nimport { cn } from \"../../utils/utils\";\r\nimport { Separator } from \"./separator\";\r\nimport { Button } from \"./button\";\r\nimport { Badge } from \"./badge\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n CommandSeparator,\r\n} from \"./command\";\r\nimport { IOptionItem } from \"../../types\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = cva(\"m-1 transition ease-in-out delay-150 \", {\r\n variants: {\r\n variant: {\r\n default:\r\n \"border-foreground/10 text-foreground bg-card hover:bg-card/80 font-normal\",\r\n secondary:\r\n \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80 font-normal\",\r\n destructive:\r\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80 font-normal\",\r\n inverted: \"inverted\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n});\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\ninterface MultiSelectProps\r\n extends Omit<\r\n React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n \"onChange\" | \"value\"\r\n >,\r\n VariantProps<typeof multiSelectVariants> {\r\n /**\r\n * An array of option objects to be displayed in the multi-select component.\r\n * Each option object has a label, value, and an optional icon.\r\n */\r\n options: IOptionItem[];\r\n\r\n /**\r\n * Callback function triggered when the selected values change.\r\n * Receives an array of the new selected values.\r\n */\r\n onChange: (value: string[]) => void;\r\n\r\n /** The controlled value of the component */\r\n value?: string[];\r\n\r\n /** The default selected values when the component mounts (uncontrolled mode) */\r\n defaultValue?: string[];\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholder?: string;\r\n\r\n /**\r\n * Placeholder text to be displayed when no values are selected.\r\n * Optional, defaults to \"Select options\".\r\n */\r\n placeholderSearch?: string;\r\n\r\n /**\r\n * Maximum number of items to display. Extra selected items will be summarized.\r\n * Optional, defaults to 3.\r\n */\r\n maxCount?: number;\r\n\r\n /**\r\n * The modality of the popover. When set to true, interaction with outside elements\r\n * will be disabled and only popover content will be visible to screen readers.\r\n * Optional, defaults to false.\r\n */\r\n modalPopover?: boolean;\r\n\r\n /**\r\n * If true, renders the multi-select component as a child of another component.\r\n * Optional, defaults to false.\r\n */\r\n asChild?: boolean;\r\n\r\n /**\r\n * Additional class names to apply custom styles to the multi-select component.\r\n * Optional, can be used to add custom styles.\r\n */\r\n className?: string;\r\n\r\n /**\r\n * If true, the multi-select component will be disabled.\r\n * Optional, defaults to false.\r\n */\r\n disabled?: boolean;\r\n\r\n /**\r\n * value?: string;\r\n onChange?: (value: string | undefined) => void;\r\n */\r\n}\r\n\r\nexport const MultiSelect = React.forwardRef<\r\n HTMLButtonElement,\r\n MultiSelectProps\r\n>(\r\n (\r\n {\r\n options,\r\n onChange,\r\n value: propValue,\r\n variant,\r\n defaultValue = [],\r\n placeholder = \"Vyberte možnosti\",\r\n placeholderSearch = \"Vyhledejte\",\r\n maxCount = 3,\r\n modalPopover = false,\r\n asChild = false,\r\n className,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [selectedValues, setSelectedValues] = React.useState<string[]>(\r\n propValue ?? defaultValue\r\n );\r\n const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n\r\n // Update internal state when controlled value changes\r\n React.useEffect(() => {\r\n if (propValue !== undefined) {\r\n setSelectedValues(propValue);\r\n }\r\n }, [propValue]);\r\n\r\n const handleValueChange = (newValues: string[]) => {\r\n setSelectedValues(newValues);\r\n onChange(newValues);\r\n };\r\n\r\n const handleTogglePopover = () => {\r\n setIsPopoverOpen((prev) => !prev);\r\n };\r\n\r\n const toggleOption = (option: string | number | null) => {\r\n if (option === null) return;\r\n const optionStr = String(option);\r\n const newSelectedValues = selectedValues.includes(optionStr)\r\n ? selectedValues.filter((value) => value !== optionStr)\r\n : [...selectedValues, optionStr];\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const handleClear = () => {\r\n handleValueChange([]);\r\n };\r\n\r\n const clearExtraOptions = () => {\r\n const newSelectedValues = selectedValues.slice(0, maxCount);\r\n handleValueChange(newSelectedValues);\r\n };\r\n\r\n const toggleAll = () => {\r\n if (selectedValues.length === options.length) {\r\n handleClear();\r\n } else {\r\n const allValues = options.map((option) => option.value as string);\r\n handleValueChange(allValues);\r\n }\r\n };\r\n\r\n return (\r\n <Popover\r\n open={isPopoverOpen}\r\n onOpenChange={setIsPopoverOpen}\r\n modal={modalPopover}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n ref={ref}\r\n {...props}\r\n onClick={handleTogglePopover}\r\n className={cn(\r\n \"flex w-full p-1 rounded-md border min-h-10 h-auto items-center justify-between hover:bg-inherit [&_svg]:pointer-events-auto font-normal bg-background text-muted-foreground\",\r\n className\r\n )}\r\n >\r\n {selectedValues.length > 0 ? (\r\n <div className=\"flex justify-between items-center w-full\">\r\n <div className=\"flex flex-wrap items-center\">\r\n {maxCount === 0 && selectedValues.length == 1 && (\r\n <span className=\"px-2\">\r\n {\r\n options.find((o) => o.value === selectedValues[0])\r\n ?.label\r\n }\r\n </span>\r\n )}\r\n {maxCount === 0 && selectedValues.length > 1 && (\r\n <span className=\"px-2\">\r\n {`Více (${selectedValues.length})`}\r\n </span>\r\n )}\r\n {maxCount > 0 &&\r\n selectedValues.slice(0, maxCount).map((value) => {\r\n const option = options.find((o) => o.value === value);\r\n return (\r\n <Badge\r\n key={value}\r\n className={cn(multiSelectVariants({ variant }))}\r\n >\r\n {option?.label}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n toggleOption(value);\r\n }}\r\n />\r\n </Badge>\r\n );\r\n })}\r\n\r\n {maxCount > 0 && selectedValues.length > maxCount && (\r\n <Badge\r\n className={cn(\r\n \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\r\n multiSelectVariants({ variant })\r\n )}\r\n >\r\n {`Více (${selectedValues.length - maxCount})`}\r\n <XCircle\r\n className=\"ml-2 h-4 w-4 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n clearExtraOptions();\r\n }}\r\n />\r\n </Badge>\r\n )}\r\n </div>\r\n <div className=\"flex items-center justify-between\">\r\n <XIcon\r\n className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n handleClear();\r\n }}\r\n />\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\r\n </div>\r\n </div>\r\n ) : (\r\n <div className=\"flex items-center justify-between w-full mx-auto\">\r\n <span className=\"text-sm text-muted-foreground mx-3\">\r\n {placeholder}\r\n </span>\r\n <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\r\n </div>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-auto p-0\"\r\n align=\"start\"\r\n onEscapeKeyDown={() => setIsPopoverOpen(false)}\r\n >\r\n <Command>\r\n <CommandInput\r\n placeholder={placeholderSearch}\r\n onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\r\n if (e.key === \"Enter\") {\r\n setIsPopoverOpen(true);\r\n } else if (e.key === \"Backspace\" && !e.currentTarget.value) {\r\n const newSelectedValues = [...selectedValues];\r\n newSelectedValues.pop();\r\n handleValueChange(newSelectedValues);\r\n }\r\n }}\r\n />\r\n <CommandList>\r\n <CommandEmpty>No results found.</CommandEmpty>\r\n <CommandGroup>\r\n <CommandItem\r\n key=\"all\"\r\n onSelect={toggleAll}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n selectedValues && selectedValues.length === options.length\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n <span>(Vyberte vše)</span>\r\n </CommandItem>\r\n {options.map((option) => {\r\n const optionStr = String(option.value);\r\n const isSelected =\r\n selectedValues?.includes(optionStr) || false;\r\n return (\r\n <CommandItem\r\n key={optionStr}\r\n onSelect={() => toggleOption(option.value)}\r\n className=\"cursor-pointer\"\r\n >\r\n <div\r\n className={cn(\r\n \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n isSelected\r\n ? \"bg-primary text-primary-foreground\"\r\n : \"opacity-50 [&_svg]:invisible\"\r\n )}\r\n >\r\n <CheckIcon className=\"h-4 w-4\" />\r\n </div>\r\n\r\n <span>{option.label}</span>\r\n </CommandItem>\r\n );\r\n })}\r\n </CommandGroup>\r\n <CommandSeparator />\r\n <CommandGroup>\r\n <div className=\"flex items-center justify-between\">\r\n {selectedValues.length > 0 && (\r\n <>\r\n <CommandItem\r\n onSelect={handleClear}\r\n className=\"flex-1 justify-center cursor-pointer\"\r\n >\r\n Odebrat vše\r\n </CommandItem>\r\n <Separator\r\n orientation=\"vertical\"\r\n className=\"flex min-h-6 h-full\"\r\n />\r\n </>\r\n )}\r\n <CommandItem\r\n onSelect={() => setIsPopoverOpen(false)}\r\n className=\"flex-1 justify-center cursor-pointer max-w-full\"\r\n >\r\n Zavřít\r\n </CommandItem>\r\n </div>\r\n </CommandGroup>\r\n </CommandList>\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n }\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n"],"names":["XCircle","XIcon","CheckIcon"],"mappings":"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","x_google_ignoreList":[0]}
package/lib/components/datatable/DataTableServer.tsx CHANGED
@@ -54,6 +54,7 @@ interface DataTableServerProps<T> {
54
54
  filters?: object;
55
55
  selectedItemKey?: string;
56
56
  itemsPerPageOptions?: IOptionItem[];
57
+ setMinWidth?: boolean;
57
58
  }
58
59
  const defaultItemsPerPageOptions: IOptionItem[] = [
59
60
  { value: 10, label: "10" },
@@ -112,6 +113,7 @@ function DataTableServer<T extends DataTableInternalItems>({
112
113
  filters,
113
114
  selectedItemKey = "id",
114
115
  itemsPerPageOptions = defaultItemsPerPageOptions,
116
+ setMinWidth = false,
115
117
  }: DataTableServerProps<T>) {
116
118
  const abortControllerRef = useRef<AbortController | null>(null);
117
119
  const [itemsPerPageLocal, setItemsPerPageLocal] = useState<number>();
@@ -749,6 +751,7 @@ function DataTableServer<T extends DataTableInternalItems>({
749
751
  tableId={id}
750
752
  colKey={String(key)}
751
753
  defaultWidth={width || "auto"}
754
+ setMinWidth={setMinWidth}
752
755
  >
753
756
  {({ ref }: { ref: any }) => (
754
757
  <th
package/lib/components/datatable/Resizable.tsx CHANGED
@@ -5,6 +5,7 @@ interface IResizableProps {
5
5
  colKey: string;
6
6
  children: any;
7
7
  defaultWidth: string;
8
+ setMinWidth?: boolean;
8
9
  }
9
10
 
10
11
  export const Resizable = ({
@@ -12,6 +13,7 @@ export const Resizable = ({
12
13
  colKey,
13
14
  defaultWidth,
14
15
  children,
16
+ setMinWidth = false,
15
17
  }: IResizableProps) => {
16
18
  const [node, setNode] = React.useState<HTMLElement | null>(null);
17
19
 
@@ -62,6 +64,9 @@ export const Resizable = ({
62
64
  const newWidth = w + dx + "px";
63
65
 
64
66
  parent?.style.setProperty("width", newWidth);
67
+ if (setMinWidth) {
68
+ parent?.style.setProperty("min-width", newWidth);
69
+ }
65
70
  setWidth(newWidth);
66
71
  };
67
72
 
@@ -84,8 +89,14 @@ export const Resizable = ({
84
89
  const parent = node.parentElement;
85
90
  if (node.parentNode !== node.parentNode?.parentNode?.lastChild) {
86
91
  parent?.style.setProperty("width", `${width}`);
92
+ if (setMinWidth) {
93
+ parent?.style.setProperty("min-width", `${width}`);
94
+ }
87
95
  } else {
88
96
  parent?.style.setProperty("width", `auto`);
97
+ if (setMinWidth) {
98
+ parent?.style.setProperty("min-width", `auto`);
99
+ }
89
100
  }
90
101
 
91
102
  node.addEventListener("mousedown", handleMouseDown);
package/lib/components/ui/multi-select.tsx CHANGED
@@ -310,7 +310,7 @@ export const MultiSelect = React.forwardRef<
310
310
  <div
311
311
  className={cn(
312
312
  "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
313
- selectedValues.length === options.length
313
+ selectedValues && selectedValues.length === options.length
314
314
  ? "bg-primary text-primary-foreground"
315
315
  : "opacity-50 [&_svg]:invisible"
316
316
  )}
@@ -321,7 +321,8 @@ export const MultiSelect = React.forwardRef<
321
321
  </CommandItem>
322
322
  {options.map((option) => {
323
323
  const optionStr = String(option.value);
324
- const isSelected = selectedValues.includes(optionStr);
324
+ const isSelected =
325
+ selectedValues?.includes(optionStr) || false;
325
326
  return (
326
327
  <CommandItem
327
328
  key={optionStr}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@addsign/moje-agenda-shared-lib",
3
3
  "private": false,
4
- "version": "2.0.48",
4
+ "version": "2.0.50",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",