@intlayer/design-system 8.5.0 → 8.5.1

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 (40) hide show
  1. package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs +1 -1
  2. package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs +2 -2
  3. package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs +1 -1
  4. package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs +3 -3
  5. package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs +1 -1
  6. package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs +2 -2
  7. package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs +2 -2
  8. package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs +1 -1
  9. package/dist/esm/components/Form/elements/OTPElement.mjs +1 -1
  10. package/dist/esm/components/IDE/CopyCode.mjs +5 -2
  11. package/dist/esm/components/IDE/CopyCode.mjs.map +1 -1
  12. package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs +1 -1
  13. package/dist/esm/components/Modal/Modal.mjs +2 -2
  14. package/dist/esm/components/Navbar/MobileNavbar.mjs +1 -1
  15. package/dist/esm/components/Pagination/Pagination.mjs +1 -1
  16. package/dist/esm/components/RightDrawer/RightDrawer.mjs +3 -3
  17. package/dist/esm/components/Table/ExpandButton.mjs +41 -0
  18. package/dist/esm/components/Table/ExpandButton.mjs.map +1 -0
  19. package/dist/esm/components/Table/Table.mjs +37 -51
  20. package/dist/esm/components/Table/Table.mjs.map +1 -1
  21. package/dist/esm/components/Table/table.content.mjs +42 -20
  22. package/dist/esm/components/Table/table.content.mjs.map +1 -1
  23. package/dist/esm/components/Table/useTableWidths.mjs +41 -0
  24. package/dist/esm/components/Table/useTableWidths.mjs.map +1 -0
  25. package/dist/esm/hooks/index.mjs +9 -9
  26. package/dist/esm/hooks/useAuth/useOAuth2.mjs +1 -1
  27. package/dist/esm/hooks/useAuth/useSession.mjs +1 -1
  28. package/dist/esm/libs/auth.mjs +1 -1
  29. package/dist/types/components/Container/index.d.ts +3 -3
  30. package/dist/types/components/IDE/CopyCode.d.ts +2 -1
  31. package/dist/types/components/IDE/CopyCode.d.ts.map +1 -1
  32. package/dist/types/components/Input/Checkbox.d.ts +1 -1
  33. package/dist/types/components/Table/ExpandButton.d.ts +10 -0
  34. package/dist/types/components/Table/ExpandButton.d.ts.map +1 -0
  35. package/dist/types/components/Table/Table.d.ts.map +1 -1
  36. package/dist/types/components/Table/table.content.d.ts +42 -20
  37. package/dist/types/components/Table/table.content.d.ts.map +1 -1
  38. package/dist/types/components/Table/useTableWidths.d.ts +7 -0
  39. package/dist/types/components/Table/useTableWidths.d.ts.map +1 -0
  40. package/package.json +14 -14
package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
+ import { useUser } from "../../hooks/useUser/index.mjs";
3
4
  import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
4
5
  import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
5
- import { useUser } from "../../hooks/useUser/index.mjs";
6
6
  import { useEffect, useState } from "react";
7
7
  import { Check, X } from "lucide-react";
8
8
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  'use client';
2
2
 
3
3
  import { renameKey } from "../../../utils/object.mjs";
4
+ import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
4
5
  import { Container } from "../../Container/index.mjs";
5
6
  import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
6
7
  import { InputVariant } from "../../Input/Input.mjs";
7
8
  import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
8
9
  import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
9
10
  import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
10
- import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
11
11
  import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
12
12
  import { Label } from "../../Label/index.mjs";
13
13
  import { MarkdownRenderer as MarkdownRenderer$1 } from "../../MarkDownRender/MarkDownRender.mjs";
@@ -15,9 +15,9 @@ import { EnumKeyInput } from "../EnumKeyInput.mjs";
15
15
  import { Fragment, useState } from "react";
16
16
  import { Plus, Trash, WandSparkles } from "lucide-react";
17
17
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
18
+ import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
18
19
  import { useIntlayer, useLocale } from "react-intlayer";
19
20
  import { getLocaleName } from "@intlayer/core/localization";
20
- import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
21
21
  import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
22
22
  import * as NodeTypes from "@intlayer/types/nodeType";
23
23
 
package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
- import { ButtonColor } from "../../Button/Button.mjs";
4
3
  import { useSession } from "../../../hooks/useAuth/useSession.mjs";
5
4
  import { useAddDictionary, useGetProjects } from "../../../hooks/reactQuery.mjs";
5
+ import { ButtonColor } from "../../Button/Button.mjs";
6
6
  import { MultiSelect } from "../../Select/Multiselect.mjs";
7
7
  import { useForm } from "../../Form/FormBase.mjs";
8
8
  import { Form } from "../../Form/Form.mjs";
package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  'use client';
2
2
 
3
+ import { useSession } from "../../../hooks/useAuth/useSession.mjs";
4
+ import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
3
5
  import { Loader } from "../../Loader/index.mjs";
4
6
  import { ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
5
7
  import { Checkbox } from "../../Input/Checkbox.mjs";
6
- import { useSession } from "../../../hooks/useAuth/useSession.mjs";
7
- import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
8
8
  import { MultiSelect } from "../../Select/Multiselect.mjs";
9
9
  import { Select } from "../../Select/Select.mjs";
10
10
  import { useForm as useForm$1 } from "../../Form/FormBase.mjs";
@@ -13,8 +13,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
13
13
  import { useEffect } from "react";
14
14
  import { WandSparkles } from "lucide-react";
15
15
  import { jsx, jsxs } from "react/jsx-runtime";
16
- import { useIntlayer } from "react-intlayer";
17
16
  import { useEditedContent } from "@intlayer/editor-react";
17
+ import { useIntlayer } from "react-intlayer";
18
18
  import { AnimatePresence, motion } from "framer-motion";
19
19
  import { useWatch } from "react-hook-form";
20
20
 
package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs CHANGED
@@ -12,8 +12,8 @@ import { StructureEditor } from "./StructureEditor.mjs";
12
12
  import { useEffect } from "react";
13
13
  import { ArrowLeft } from "lucide-react";
14
14
  import { jsx, jsxs } from "react/jsx-runtime";
15
- import { useIntlayer } from "react-intlayer";
16
15
  import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
16
+ import { useIntlayer } from "react-intlayer";
17
17
 
18
18
  //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
19
19
  const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true }) => {
package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
2
2
  import { Accordion } from "../../Accordion/Accordion.mjs";
3
3
  import { getIsEditableSection } from "../getIsEditableSection.mjs";
4
- import configuration from "@intlayer/config/built";
5
4
  import { ChevronRight, Plus } from "lucide-react";
6
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
7
- import { useIntlayer } from "react-intlayer";
8
6
  import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
7
+ import configuration from "@intlayer/config/built";
8
+ import { useIntlayer } from "react-intlayer";
9
9
  import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
10
10
  import * as NodeTypes from "@intlayer/types/nodeType";
11
11
  import { isSameKeyPath } from "@intlayer/core/utils";
package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs CHANGED
@@ -1,16 +1,16 @@
1
1
  'use client';
2
2
 
3
3
  import { cn } from "../../../utils/cn.mjs";
4
- import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
5
4
  import { useAuth } from "../../../hooks/useAuth/useAuth.mjs";
6
5
  import { useDeleteDictionary, usePushDictionaries, useWriteDictionary } from "../../../hooks/reactQuery.mjs";
6
+ import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
7
7
  import { Modal, ModalSize } from "../../Modal/Modal.mjs";
8
8
  import { Form } from "../../Form/Form.mjs";
9
9
  import { useState } from "react";
10
10
  import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
11
11
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
12
- import { useIntlayer } from "react-intlayer";
13
12
  import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
13
+ import { useIntlayer } from "react-intlayer";
14
14
 
15
15
  //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
16
16
  const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {
package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs CHANGED
@@ -7,8 +7,8 @@ import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
7
7
  import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
8
8
  import { Plus, Trash } from "lucide-react";
9
9
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
10
- import { useIntlayer } from "react-intlayer";
11
10
  import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
11
+ import { useIntlayer } from "react-intlayer";
12
12
  import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
13
13
  import * as NodeTypes from "@intlayer/types/nodeType";
14
14
  import { isSameKeyPath } from "@intlayer/core/utils";
package/dist/esm/components/Form/elements/OTPElement.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
- import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
4
3
  import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
4
+ import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
5
5
  import { useFormField } from "../FormField.mjs";
6
6
  import { FormItemLayout } from "../layout/FormItemLayout.mjs";
7
7
  import { Form } from "../Form.mjs";
package/dist/esm/components/IDE/CopyCode.mjs CHANGED
@@ -7,11 +7,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
7
7
  import { useIntlayer } from "react-intlayer";
8
8
 
9
9
  //#region src/components/IDE/CopyCode.tsx
10
- const CopyCode = ({ code }) => {
10
+ const CopyCode = ({ code, ...props }) => {
11
11
  const { title, description } = useIntlayer("code");
12
12
  return /* @__PURE__ */ jsxs(Popover, {
13
13
  identifier: "copy",
14
- children: [/* @__PURE__ */ jsx(CopyButton, { content: code }), /* @__PURE__ */ jsxs(Popover.Detail, {
14
+ children: [/* @__PURE__ */ jsx(CopyButton, {
15
+ content: code,
16
+ ...props
17
+ }), /* @__PURE__ */ jsxs(Popover.Detail, {
15
18
  identifier: "copy",
16
19
  className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
17
20
  xAlign: PopoverXAlign.END,
package/dist/esm/components/IDE/CopyCode.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAa,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD,EAAY,SAAS,MAAQ,GAE7B,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;aAHxB,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}
1
+ {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} {...props} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;GAAS,GAExC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;aAHxB,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}
package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  'use client';
2
2
 
3
+ import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
3
4
  import { Container } from "../Container/index.mjs";
4
5
  import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
5
6
  import { Input } from "../Input/Input.mjs";
6
7
  import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
7
- import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
8
8
  import { DropDown } from "../DropDown/index.mjs";
9
9
  import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
10
10
  import { useMemo, useRef, useState } from "react";
package/dist/esm/components/Modal/Modal.mjs CHANGED
@@ -1,11 +1,11 @@
1
1
  'use client';
2
2
 
3
3
  import { cn } from "../../utils/cn.mjs";
4
+ import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
5
+ import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
4
6
  import { Container } from "../Container/index.mjs";
5
7
  import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
6
8
  import { H3 } from "../Headers/index.mjs";
7
- import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
8
- import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
9
9
  import { useEffect } from "react";
10
10
  import { cva } from "class-variance-authority";
11
11
  import { X } from "lucide-react";
package/dist/esm/components/Navbar/MobileNavbar.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  'use client';
2
2
 
3
3
  import { cn } from "../../utils/cn.mjs";
4
- import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
5
4
  import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
6
5
  import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
6
+ import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
7
7
  import { Burger } from "./Burger.mjs";
8
8
  import { useRef, useState } from "react";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
package/dist/esm/components/Pagination/Pagination.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
3
  import { cn } from "../../utils/cn.mjs";
4
- import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
5
4
  import { useItemSelector } from "../../hooks/useItemSelector.mjs";
5
+ import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
6
6
  import { useEffect, useRef } from "react";
7
7
  import { cva } from "class-variance-authority";
8
8
  import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
package/dist/esm/components/RightDrawer/RightDrawer.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  'use client';
2
2
 
3
+ import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
4
+ import { useDevice } from "../../hooks/useDevice.mjs";
5
+ import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
3
6
  import { Container } from "../Container/index.mjs";
4
7
  import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
5
- import { useDevice } from "../../hooks/useDevice.mjs";
6
8
  import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
7
9
  import { Popover } from "../Popover/dynamic.mjs";
8
- import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
9
- import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
10
10
  import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
11
11
  import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
12
12
  import { useRightDrawer } from "./useRightDrawer.mjs";
package/dist/esm/components/Table/ExpandButton.mjs ADDED
@@ -0,0 +1,41 @@
1
+ import { Button } from "../Button/Button.mjs";
2
+ import { PopoverXAlign } from "../Popover/static.mjs";
3
+ import { Popover } from "../Popover/dynamic.mjs";
4
+ import { MoveDiagonal } from "lucide-react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { useIntlayer } from "react-intlayer";
7
+
8
+ //#region src/components/Table/ExpandButton.tsx
9
+ const ExpandButton = ({ setIsModalOpen }) => {
10
+ const { modal: modalContent } = useIntlayer("table");
11
+ return /* @__PURE__ */ jsx("div", {
12
+ className: "pointer-events-none absolute inset-y-0 right-4 z-10",
13
+ children: /* @__PURE__ */ jsx("div", {
14
+ className: "pointer-events-auto sticky top-48 pt-4",
15
+ children: /* @__PURE__ */ jsxs(Popover, {
16
+ identifier: "expand",
17
+ children: [/* @__PURE__ */ jsx(Button, {
18
+ variant: "hoverable",
19
+ size: "icon-md",
20
+ onClick: () => {
21
+ setIsModalOpen(true);
22
+ },
23
+ label: modalContent.title,
24
+ Icon: MoveDiagonal
25
+ }), /* @__PURE__ */ jsxs(Popover.Detail, {
26
+ identifier: "expand",
27
+ className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
28
+ xAlign: PopoverXAlign.END,
29
+ children: [/* @__PURE__ */ jsx("strong", { children: modalContent.title }), /* @__PURE__ */ jsx("p", {
30
+ className: "text-neutral",
31
+ children: modalContent.description
32
+ })]
33
+ })]
34
+ })
35
+ })
36
+ });
37
+ };
38
+
39
+ //#endregion
40
+ export { ExpandButton };
41
+ //# sourceMappingURL=ExpandButton.mjs.map
package/dist/esm/components/Table/ExpandButton.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover, PopoverXAlign } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n const { modal: modalContent } = useIntlayer('table');\n\n return (\n <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n <div className=\"pointer-events-auto sticky top-48 pt-4\">\n <Popover identifier=\"expand\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label={modalContent.title}\n Icon={MoveDiagonal}\n />\n\n <Popover.Detail\n identifier=\"expand\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{modalContent.title}</strong>\n <p className=\"text-neutral\">{modalContent.description}</p>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,QAAQ;AAEpD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;AACb,qBAAe,KAAK;;KAEtB,OAAO,aAAa;KACpB,MAAM;KACN,GAEF,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV,QAAQ,cAAc;eAHxB,CAKE,oBAAC,UAAD,YAAS,aAAa,OAAe,GACrC,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;MAAgB,EAC3C;OACT;;GACN;EACF"}
package/dist/esm/components/Table/Table.mjs CHANGED
@@ -1,17 +1,14 @@
1
1
  'use client';
2
2
 
3
3
  import { cn } from "../../utils/cn.mjs";
4
- import { Button } from "../Button/Button.mjs";
5
4
  import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
6
5
  import { Modal, ModalSize } from "../Modal/Modal.mjs";
6
+ import { ExpandButton } from "./ExpandButton.mjs";
7
+ import { useTableWidths } from "./useTableWidths.mjs";
7
8
  import { useEffect, useRef, useState } from "react";
8
- import { MoveDiagonal } from "lucide-react";
9
9
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
10
10
 
11
11
  //#region src/components/Table/Table.tsx
12
- const CHAR_WIDTH_REM = .55;
13
- const MIN_WIDTH_REM = 5;
14
- const MAX_WIDTH_REM = 30;
15
12
  /**
16
13
  * Table component that provides an enhanced table experience with modal expansion and collapsible content
17
14
  *
@@ -149,63 +146,52 @@ const MAX_WIDTH_REM = 30;
149
146
  * @see {@link Modal} - Component used for full-screen table view
150
147
  * @see {@link Button} - Component used for the modal trigger button
151
148
  */
152
- const Table = ({ className, isRollable = false, displayModal, ...props }) => {
149
+ const Table = ({ className, isRollable = false, displayModal, onClick, ...props }) => {
153
150
  const [isModalOpen, setIsModalOpen] = useState(false);
151
+ const [highlightedRowIndex, setHighlightedRowIndex] = useState(null);
154
152
  const tableRef = useRef(null);
155
153
  const modalTableRef = useRef(null);
154
+ useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);
156
155
  useEffect(() => {
157
- if (!tableRef.current) return;
158
- const colLengths = [];
159
- Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
160
- Array.from(row.children).forEach((cell, index) => {
161
- const len = cell.textContent?.trim().length ?? 0;
162
- if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
163
- });
164
- });
165
- const applyToTable = (table) => {
166
- const rows = Array.from(table.querySelectorAll("tr"));
167
- if (rows.length === 0) return;
168
- const applyColStyle = (el, index) => {
169
- const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
170
- el.style.minWidth = `${minRem}rem`;
171
- el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
172
- };
173
- table.querySelectorAll("th").forEach((th, index) => {
174
- applyColStyle(th, index);
175
- });
176
- rows.forEach((row) => {
177
- row.querySelectorAll("td").forEach((td, index) => {
178
- applyColStyle(td, index);
156
+ if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {
157
+ const row = modalTableRef.current.rows[highlightedRowIndex];
158
+ if (row) {
159
+ row.scrollIntoView({
160
+ behavior: "smooth",
161
+ block: "center"
179
162
  });
180
- });
181
- };
182
- applyToTable(tableRef.current);
183
- if (modalTableRef.current) applyToTable(modalTableRef.current);
184
- }, [props.children, isModalOpen]);
163
+ row.classList.add("bg-neutral/40", "dark:bg-neutral-dark/40");
164
+ row.style.transition = "background-color 0.3s ease-in-out";
165
+ }
166
+ }
167
+ }, [isModalOpen, highlightedRowIndex]);
168
+ useEffect(() => {
169
+ if (!isModalOpen) setHighlightedRowIndex(null);
170
+ }, [isModalOpen]);
171
+ const handleTableClick = (e) => {
172
+ if (displayModal) {
173
+ const tr = e.target.closest("tr");
174
+ if (tr?.closest("tbody")) {
175
+ setHighlightedRowIndex(tr.rowIndex);
176
+ setIsModalOpen(true);
177
+ }
178
+ }
179
+ onClick?.(e);
180
+ };
185
181
  return /* @__PURE__ */ jsxs("div", {
186
- className: "relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
182
+ className: "group relative",
187
183
  children: [
188
- displayModal && /* @__PURE__ */ jsx("div", {
189
- className: "sticky top-48 z-10",
190
- children: /* @__PURE__ */ jsx("div", {
191
- className: "absolute top-4 right-2",
192
- children: /* @__PURE__ */ jsx(Button, {
193
- variant: "hoverable",
194
- size: "icon-md",
195
- onClick: () => {
196
- setIsModalOpen(true);
197
- },
198
- label: "Move",
199
- Icon: MoveDiagonal
200
- })
201
- })
202
- }),
184
+ displayModal && /* @__PURE__ */ jsx(ExpandButton, { setIsModalOpen }),
203
185
  /* @__PURE__ */ jsx(ExpandCollapse, {
204
186
  isRollable,
205
- className: "max-w-full overflow-x-auto",
187
+ className: "max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
206
188
  children: /* @__PURE__ */ jsx("table", {
207
189
  ref: tableRef,
208
- className: cn("w-full table-auto text-left", className),
190
+ className: cn("w-full table-auto overflow-hidden", displayModal && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
191
+ onClick: handleTableClick,
192
+ onKeyDown: (e) => {
193
+ if (e.key === "Enter" || e.key === " ") handleTableClick(e);
194
+ },
209
195
  ...props
210
196
  })
211
197
  }),
package/dist/esm/components/Table/Table.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined || len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, [props.children, isModalOpen]);\n\n return (\n <div className=\"relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n ref={tableRef}\n className={cn('w-full table-auto text-left', className)}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n ref={modalTableRef}\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2ItB,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAErD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GAAG,+BAA+B,UAAU;KACvD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
1
+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\n\nimport {\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport { useTableWidths } from './useTableWidths';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n onClick,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [highlightedRowIndex, setHighlightedRowIndex] = useState<number | null>(\n null\n );\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n useEffect(() => {\n if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n const row = modalTableRef.current.rows[highlightedRowIndex];\n\n if (row) {\n row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n row.style.transition = 'background-color 0.3s ease-in-out';\n }\n }\n }, [isModalOpen, highlightedRowIndex]);\n\n useEffect(() => {\n if (!isModalOpen) {\n setHighlightedRowIndex(null);\n }\n }, [isModalOpen]);\n\n const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n if (displayModal) {\n const target = e.target as HTMLElement;\n const tr = target.closest('tr');\n\n if (tr?.closest('tbody')) {\n setHighlightedRowIndex(tr.rowIndex);\n setIsModalOpen(true);\n }\n }\n onClick?.(e);\n };\n\n return (\n <div className=\"group relative\">\n {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n >\n <table\n ref={tableRef}\n className={cn(\n 'w-full table-auto overflow-hidden',\n displayModal &&\n '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n className\n )}\n onClick={handleTableClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n handleTableClick(\n e as unknown as React.MouseEvent<HTMLTableElement>\n );\n }\n }}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n ref={modalTableRef}\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6MA,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,KACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,gBAAe,UAAU,eAAe,CAAC,MAAM,UAAU,YAAY,CAAC;AAEtE,iBAAgB;AACd,MAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;AAEvC,OAAI,KAAK;AACP,QAAI,eAAe;KAAE,UAAU;KAAU,OAAO;KAAU,CAAC;AAE3D,QAAI,UAAU,IAAI,iBAAiB,0BAA0B;AAC7D,QAAI,MAAM,aAAa;;;IAG1B,CAAC,aAAa,oBAAoB,CAAC;AAEtC,iBAAgB;AACd,MAAI,CAAC,YACH,wBAAuB,KAAK;IAE7B,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB,MAA0C;AAClE,MAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,KAAK;AAE/B,OAAI,IAAI,QAAQ,QAAQ,EAAE;AACxB,2BAAuB,GAAG,SAAS;AACnC,mBAAe,KAAK;;;AAGxB,YAAU,EAAE;;AAGd,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,gBAAkB;GAEjE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GACT,qCACA,gBACE,0IACF,UACD;KACD,SAAS;KACT,YAAY,MAAM;AAChB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,kBACE,EACD;;KAGL,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
package/dist/esm/components/Table/table.content.mjs CHANGED
@@ -3,26 +3,48 @@ import { t } from "intlayer";
3
3
  //#region src/components/Table/table.content.ts
4
4
  const tableContent = {
5
5
  key: "table",
6
- content: { show: t({
7
- en: "Show all table content",
8
- fr: "Afficher tout le contenu du tableau",
9
- es: "Mostrar todo el contenido de la tabla",
10
- "en-GB": "Show all table content",
11
- de: "Alle Tabellendaten anzeigen",
12
- ja: "テーブルのすべての内容を表示",
13
- ko: "테이블의 모든 내용 표시",
14
- zh: "显示表格的所有内容",
15
- it: "Mostra tutto il contenuto della tabella",
16
- pt: "Mostrar todo o conteúdo da tabela",
17
- hi: "सभी तालिका सामग्री दिखाएं",
18
- ar: "اظهار جميع محتويات الجدول",
19
- ru: "Показать все данные таблицы",
20
- tr: "Tüm tablo içeriğini göster",
21
- pl: "Pokaż całą zawartość tabeli",
22
- id: "Tampilkan semua isi tabel",
23
- vi: "Hiển thị tất cả nội dung bảng",
24
- uk: "Показати весь вміст таблиці"
25
- }) },
6
+ content: { modal: {
7
+ title: t({
8
+ en: "Show all table content",
9
+ fr: "Afficher tout le contenu du tableau",
10
+ es: "Mostrar todo el contenido de la tabla",
11
+ "en-GB": "Show all table content",
12
+ de: "Alle Tabellendaten anzeigen",
13
+ ja: "テーブルのすべての内容を表示",
14
+ ko: "테이블의 모든 내용 표시",
15
+ zh: "显示表格的所有内容",
16
+ it: "Mostra tutto il contenuto della tabella",
17
+ pt: "Mostrar todo o conteúdo da tabela",
18
+ hi: "सभी तालिका सामग्री दिखाएं",
19
+ ar: "اظهار جميع محتويات الجدول",
20
+ ru: "Показать все данные таблицы",
21
+ tr: "Tüm tablo içeriğini göster",
22
+ pl: "Pokaż całą zawartość tabeli",
23
+ id: "Tampilkan semua isi tabel",
24
+ vi: "Hiển thị tất cả nội dung bảng",
25
+ uk: "Показати весь вміст таблиці"
26
+ }),
27
+ description: t({
28
+ en: "Open the table in a modal to view all data content clearly",
29
+ fr: "Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement",
30
+ es: "Abrir la tabla en una ventana flotante para ver todo el contenido claramente",
31
+ "en-GB": "Open the table in a modal to view all data content clearly",
32
+ de: "Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen",
33
+ ja: "テーブルをモーダルで開き、すべてのデータを明確に表示",
34
+ ko: "테이블을 모달로 열어 모든 데이터를 명확하게 확인",
35
+ zh: "在弹窗中打开表格以清晰地查看所有数据",
36
+ it: "Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro",
37
+ pt: "Abrir a tabela em um modal para ver todo o conteúdo claramente",
38
+ hi: "सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें",
39
+ ar: "افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح",
40
+ ru: "Открыть таблицу в модальном окне для четкого просмотра всех данных",
41
+ tr: "Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın",
42
+ pl: "Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość",
43
+ id: "Buka tabel dalam modal untuk melihat semua isi data dengan jelas",
44
+ vi: "Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng",
45
+ uk: "Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані"
46
+ })
47
+ } },
26
48
  title: "Table component content",
27
49
  description: "Content declaration related to the Table component, specifically for UI message to display all table content.",
28
50
  tags: [
package/dist/esm/components/Table/table.content.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n content: {\n show: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n pl: 'Pokaż całą zawartość tabeli',\n id: 'Tampilkan semua isi tabel',\n vi: 'Hiển thị tất cả nội dung bảng',\n uk: 'Показати весь вміст таблиці',\n }),\n },\n title: 'Table component content',\n description:\n 'Content declaration related to the Table component, specifically for UI message to display all table content.',\n tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,MAAM,EAAE;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD"}
1
+ {"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n key: 'table',\n content: {\n modal: {\n title: t({\n en: 'Show all table content',\n fr: 'Afficher tout le contenu du tableau',\n es: 'Mostrar todo el contenido de la tabla',\n 'en-GB': 'Show all table content',\n de: 'Alle Tabellendaten anzeigen',\n ja: 'テーブルのすべての内容を表示',\n ko: '테이블의 모든 내용 표시',\n zh: '显示表格的所有内容',\n it: 'Mostra tutto il contenuto della tabella',\n pt: 'Mostrar todo o conteúdo da tabela',\n hi: 'सभी तालिका सामग्री दिखाएं',\n ar: 'اظهار جميع محتويات الجدول',\n ru: 'Показать все данные таблицы',\n tr: 'Tüm tablo içeriğini göster',\n pl: 'Pokaż całą zawartość tabeli',\n id: 'Tampilkan semua isi tabel',\n vi: 'Hiển thị tất cả nội dung bảng',\n uk: 'Показати весь вміст таблиці',\n }),\n description: t({\n en: 'Open the table in a modal to view all data content clearly',\n fr: 'Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement',\n es: 'Abrir la tabla en una ventana flotante para ver todo el contenido claramente',\n 'en-GB': 'Open the table in a modal to view all data content clearly',\n de: 'Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen',\n ja: 'テーブルをモーダルで開き、すべてのデータを明確に表示',\n ko: '테이블을 모달로 열어 모든 데이터를 명확하게 확인',\n zh: '在弹窗中打开表格以清晰地查看所有数据',\n it: 'Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro',\n pt: 'Abrir a tabela em um modal para ver todo o conteúdo claramente',\n hi: 'सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें',\n ar: 'افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح',\n ru: 'Открыть таблицу в модальном окне для четкого просмотра всех данных',\n tr: 'Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın',\n pl: 'Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość',\n id: 'Buka tabel dalam modal untuk melihat semua isi data dengan jelas',\n vi: 'Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng',\n uk: 'Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані',\n }),\n },\n },\n title: 'Table component content',\n description:\n 'Content declaration related to the Table component, specifically for UI message to display all table content.',\n tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,OAAO;EACL,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH,EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD"}
package/dist/esm/components/Table/useTableWidths.mjs ADDED
@@ -0,0 +1,41 @@
1
+ import { useEffect } from "react";
2
+
3
+ //#region src/components/Table/useTableWidths.ts
4
+ const CHAR_WIDTH_REM = .55;
5
+ const MIN_WIDTH_REM = 5;
6
+ const MAX_WIDTH_REM = 30;
7
+ const useTableWidths = (tableRef, modalTableRef, dependencies) => {
8
+ useEffect(() => {
9
+ if (!tableRef.current) return;
10
+ const colLengths = [];
11
+ Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
12
+ Array.from(row.children).forEach((cell, index) => {
13
+ const len = cell.textContent?.trim().length ?? 0;
14
+ if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
15
+ });
16
+ });
17
+ const applyToTable = (table) => {
18
+ const rows = Array.from(table.querySelectorAll("tr"));
19
+ if (rows.length === 0) return;
20
+ const applyColStyle = (el, index) => {
21
+ const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
22
+ el.style.minWidth = `${minRem}rem`;
23
+ el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
24
+ };
25
+ table.querySelectorAll("th").forEach((th, index) => {
26
+ applyColStyle(th, index);
27
+ });
28
+ rows.forEach((row) => {
29
+ row.querySelectorAll("td").forEach((td, index) => {
30
+ applyColStyle(td, index);
31
+ });
32
+ });
33
+ };
34
+ applyToTable(tableRef.current);
35
+ if (modalTableRef.current) applyToTable(modalTableRef.current);
36
+ }, dependencies);
37
+ };
38
+
39
+ //#endregion
40
+ export { useTableWidths };
41
+ //# sourceMappingURL=useTableWidths.mjs.map
package/dist/esm/components/Table/useTableWidths.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n tableRef: RefObject<HTMLTableElement | null>,\n modalTableRef: RefObject<HTMLTableElement | null>,\n dependencies: any[]\n) => {\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined || len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;AACH,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,aAAa"}
package/dist/esm/hooks/index.mjs CHANGED
@@ -1,22 +1,22 @@
1
- import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
2
- import { useItemSelector } from "./useItemSelector.mjs";
1
+ import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
2
+ import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
3
+ import { useScrollY } from "./useScrollY.mjs";
3
4
  import { usePersistedStore } from "./usePersistedStore.mjs";
5
+ import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
6
+ import { useItemSelector } from "./useItemSelector.mjs";
7
+ import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
4
8
  import { useOAuth2 } from "./useAuth/useOAuth2.mjs";
5
9
  import { useSession } from "./useAuth/useSession.mjs";
6
10
  import { useAuth } from "./useAuth/useAuth.mjs";
7
11
  import { useIntlayerAuth, useIntlayerOAuth } from "./useIntlayerAPI.mjs";
8
12
  import { useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeletePasskey, useDeleteProject, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDisableTwoFactor, useEnableTwoFactor, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useInfiniteGetDictionaries, useListPasskeys, useListSSOProviders, useLogin, useLogout, usePushCIConfig, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useSearchDoc, useSelectOrganization, useSelectProject, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary } from "./reactQuery.mjs";
9
- import { useUser } from "./useUser/index.mjs";
10
- import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
13
+ import { useSearch } from "./useSearch.mjs";
14
+ import { useIsMounted } from "./useIsMounted.mjs";
11
15
  import { useGetElementById } from "./useGetElementById.mjs";
12
- import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
13
16
  import { useIsDarkMode } from "./useIsDarkMode.mjs";
14
- import { useIsMounted } from "./useIsMounted.mjs";
15
- import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
16
17
  import { useScreenWidth } from "./useScreenWidth.mjs";
17
18
  import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
18
19
  import { useScrollDetection } from "./useScrollDetection.mjs";
19
- import { useScrollY } from "./useScrollY.mjs";
20
- import { useSearch } from "./useSearch.mjs";
20
+ import { useUser } from "./useUser/index.mjs";
21
21
 
22
22
  export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useAddDictionary, useAddNewAccessKey, useAddOrganization, useAddOrganizationMember, useAddPasskey, useAddProject, useAddTag, useAppQuery, useAskDocQuestion, useAskResetPassword, useAuditContentDeclaration, useAuditContentDeclarationField, useAuditContentDeclarationMetadata, useAuditScan, useAuditTag, useAuth, useAutocomplete, useBitbucketAuth, useBitbucketCheckConfig, useBitbucketGetConfigFile, useBitbucketRepos, useCancelSubscription, useChangePassword, useCreateUser, useDeleteAccessKey, useDeleteDictionary, useDeleteOrganization, useDeletePasskey, useDeleteProject, useDeleteSSOProvider, useDeleteShowcaseProject, useDeleteTag, useDeleteUser, useDevice, useDisableTwoFactor, useEnableTwoFactor, useGetCIConfig, useGetDictionaries, useGetDictionariesKeys, useGetDictionary, useGetDiscussions, useGetDiscussionsData, useGetEditorDictionaries, useGetElementById, useGetElementOrWindow, useGetNewsletterStatus, useGetOrganizations, useGetOtherShowcaseProjects, useGetPricing, useGetProjects, useGetRecursiveAuditStatus, useGetShowcaseProjectById, useGetShowcaseProjects, useGetSubscription, useGetTags, useGetUserByAccount, useGetUserById, useGetUsers, useGetVerifyEmailStatus, useGithubAuth, useGithubCheckConfig, useGithubGetAuthUrl, useGithubGetConfigFile, useGithubRepos, useGitlabAuth, useGitlabCheckConfig, useGitlabGetConfigFile, useGitlabProjects, useHorizontalSwipe, useInfiniteGetDictionaries, useIntlayerAuth, useIntlayerOAuth, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, useListPasskeys, useListSSOProviders, useLogin, useLogout, useOAuth2, usePersistedStore, usePushCIConfig, usePushDictionaries, useQueryClient, useRefreshAccessKey, useRegister, useRegisterSSO, useResetPassword, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useSearchDoc, useSelectOrganization, useSelectProject, useSession, useSignInMagicLink, useSignInPasskey, useSignInSSO, useStartRecursiveAudit, useSubmitShowcaseProject, useSubscribeToNewsletter, useToggleShowcaseDownvote, useToggleShowcaseUpvote, useTranslateJSONDeclaration, useTriggerBuild, useTriggerWebhook, useUnselectOrganization, useUnselectProject, useUnsubscribeFromNewsletter, useUpdateDictionary, useUpdateOrganization, useUpdateOrganizationMembers, useUpdateOrganizationMembersById, useUpdateProject, useUpdateProjectMembers, useUpdateShowcaseProject, useUpdateTag, useUpdateUser, useUser, useVerifyBackupCode, useVerifyEmail, useVerifyTotp, useWriteDictionary };
package/dist/esm/hooks/useAuth/useOAuth2.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  'use client';
2
2
 
3
- import configuration from "@intlayer/config/built";
4
3
  import { useQuery } from "@tanstack/react-query";
5
4
  import { useConfiguration } from "@intlayer/editor-react";
6
5
  import { getOAuthAPI } from "@intlayer/api";
6
+ import configuration from "@intlayer/config/built";
7
7
 
8
8
  //#region src/hooks/useAuth/useOAuth2.ts
9
9
  const useOAuth2 = (intlayerConfiguration) => {
package/dist/esm/hooks/useAuth/useSession.mjs CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  import { getAuthAPI } from "../../libs/auth.mjs";
4
4
  import { useQueryClient } from "../reactQuery.mjs";
5
- import configuration from "@intlayer/config/built";
6
5
  import { useQuery } from "@tanstack/react-query";
7
6
  import { useConfiguration } from "@intlayer/editor-react";
7
+ import configuration from "@intlayer/config/built";
8
8
 
9
9
  //#region src/hooks/useAuth/useSession.ts
10
10
  const useSession = (sessionProp, intlayerConfiguration) => {
package/dist/esm/libs/auth.mjs CHANGED
@@ -1,6 +1,6 @@
1
+ import configuration from "@intlayer/config/built";
1
2
  import { passkeyClient } from "@better-auth/passkey/client";
2
3
  import { ssoClient } from "@better-auth/sso/client";
3
- import configuration from "@intlayer/config/built";
4
4
  import { BACKEND_URL } from "@intlayer/config/defaultValues";
5
5
  import { createAuthClient } from "better-auth/client";
6
6
  import { magicLinkClient, twoFactorClient } from "better-auth/client/plugins";
package/dist/types/components/Container/index.d.ts CHANGED
@@ -12,9 +12,9 @@ declare const containerVariants: (props?: {
12
12
  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
13
13
  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
14
14
  separator?: "both" | "without" | "x" | "y";
15
- border?: "none" | "with";
16
- borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "card" | "warning";
17
- background?: "none" | "hoverable" | "with";
15
+ border?: "with" | "none";
16
+ borderColor?: "error" | "text" | "primary" | "secondary" | "neutral" | "card" | "success" | "warning";
17
+ background?: "with" | "none" | "hoverable";
18
18
  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
19
19
  } & class_variance_authority_types0.ClassProp) => string;
20
20
  /** Available rounded corner sizes for the container */
package/dist/types/components/IDE/CopyCode.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { FC } from "react";
2
+ import { ButtonProps } from "@components/Button";
2
3
 
3
4
  //#region src/components/IDE/CopyCode.d.ts
4
5
  type CopyCodeProps = {
5
6
  code: string;
6
- };
7
+ } & Partial<Omit<ButtonProps, 'children'>>;
7
8
  declare const CopyCode: FC<CopyCodeProps>;
8
9
  //#endregion
9
10
  export { CopyCode };
package/dist/types/components/IDE/CopyCode.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CopyCode.d.ts","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"mappings":";;;KAOK,aAAA;EACH,IAAA;AAAA;AAAA,cAGW,QAAA,EAAU,EAAA,CAAG,aAAA"}
1
+ {"version":3,"file":"CopyCode.d.ts","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"mappings":";;;;KAQK,aAAA;EACH,IAAA;AAAA,IACE,OAAA,CAAQ,IAAA,CAAK,WAAA;AAAA,cAEJ,QAAA,EAAU,EAAA,CAAG,aAAA"}
package/dist/types/components/Input/Checkbox.d.ts CHANGED
@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
6
6
  declare const checkboxVariants: (props?: {
7
7
  variant?: "default";
8
8
  size?: "xs" | "sm" | "md" | "lg";
9
- color?: "error" | "success" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "custom";
9
+ color?: "error" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "success" | "custom";
10
10
  validationStyleEnabled?: "enabled" | "disabled";
11
11
  } & class_variance_authority_types0.ClassProp) => string;
12
12
  declare enum CheckboxSize {
package/dist/types/components/Table/ExpandButton.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { FC } from "react";
2
+
3
+ //#region src/components/Table/ExpandButton.d.ts
4
+ type ExpandButtonProps = {
5
+ setIsModalOpen: (isOpen: boolean) => void;
6
+ };
7
+ declare const ExpandButton: FC<ExpandButtonProps>;
8
+ //#endregion
9
+ export { ExpandButton };
10
+ //# sourceMappingURL=ExpandButton.d.ts.map
package/dist/types/components/Table/ExpandButton.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ExpandButton.d.ts","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"mappings":";;;KAMK,iBAAA;EACH,cAAA,GAAiB,MAAA;AAAA;AAAA,cAGN,YAAA,EAAc,EAAA,CAAG,iBAAA"}
package/dist/types/components/Table/Table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"mappings":";;;;;AAUe;;;;;;;;;;AAuMf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAnJK,UAAA,GAAa,cAAA,CAAe,gBAAA;EAC/B,UAAA;EACA,YAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiJW,KAAA,EAAO,EAAA,CAAG,UAAA"}
1
+ {"version":3,"file":"Table.d.ts","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"mappings":";;;;;AAUe;;;;;;;;;;AAmMf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA9IK,UAAA,GAAa,cAAA,CAAe,gBAAA;EAC/B,UAAA;EACA,YAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4IW,KAAA,EAAO,EAAA,CAAG,UAAA"}
package/dist/types/components/Table/table.content.d.ts CHANGED
@@ -4,26 +4,48 @@ import * as _intlayer_core_transpiler0 from "@intlayer/core/transpiler";
4
4
  declare const tableContent: {
5
5
  key: string;
6
6
  content: {
7
- show: _intlayer_core_transpiler0.TranslationContent<unknown, {
8
- en: string;
9
- fr: string;
10
- es: string;
11
- 'en-GB': string;
12
- de: string;
13
- ja: string;
14
- ko: string;
15
- zh: string;
16
- it: string;
17
- pt: string;
18
- hi: string;
19
- ar: string;
20
- ru: string;
21
- tr: string;
22
- pl: string;
23
- id: string;
24
- vi: string;
25
- uk: string;
26
- }>;
7
+ modal: {
8
+ title: _intlayer_core_transpiler0.TranslationContent<unknown, {
9
+ en: string;
10
+ fr: string;
11
+ es: string;
12
+ 'en-GB': string;
13
+ de: string;
14
+ ja: string;
15
+ ko: string;
16
+ zh: string;
17
+ it: string;
18
+ pt: string;
19
+ hi: string;
20
+ ar: string;
21
+ ru: string;
22
+ tr: string;
23
+ pl: string;
24
+ id: string;
25
+ vi: string;
26
+ uk: string;
27
+ }>;
28
+ description: _intlayer_core_transpiler0.TranslationContent<unknown, {
29
+ en: string;
30
+ fr: string;
31
+ es: string;
32
+ 'en-GB': string;
33
+ de: string;
34
+ ja: string;
35
+ ko: string;
36
+ zh: string;
37
+ it: string;
38
+ pt: string;
39
+ hi: string;
40
+ ar: string;
41
+ ru: string;
42
+ tr: string;
43
+ pl: string;
44
+ id: string;
45
+ vi: string;
46
+ uk: string;
47
+ }>;
48
+ };
27
49
  };
28
50
  title: string;
29
51
  description: string;
package/dist/types/components/Table/table.content.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.content.d.ts","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"mappings":";;;cAEM,YAAA;;;UA4BgB,0BAAA,CAAA,kBAAA"}
1
+ {"version":3,"file":"table.content.d.ts","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"mappings":";;;cAEM,YAAA;;;;aAkDgB,0BAAA,CAAA,kBAAA;;;;;;;;;;;;;;;;;;;;mBAAA,0BAAA,CAAA,kBAAA"}
package/dist/types/components/Table/useTableWidths.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { RefObject } from "react";
2
+
3
+ //#region src/components/Table/useTableWidths.d.ts
4
+ declare const useTableWidths: (tableRef: RefObject<HTMLTableElement | null>, modalTableRef: RefObject<HTMLTableElement | null>, dependencies: any[]) => void;
5
+ //#endregion
6
+ export { useTableWidths };
7
+ //# sourceMappingURL=useTableWidths.d.ts.map
package/dist/types/components/Table/useTableWidths.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTableWidths.d.ts","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"mappings":";;;cAOa,cAAA,GACX,QAAA,EAAU,SAAA,CAAU,gBAAA,UACpB,aAAA,EAAe,SAAA,CAAU,gBAAA,UACzB,YAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@intlayer/design-system",
3
- "version": "8.5.0",
3
+ "version": "8.5.1",
4
4
  "private": false,
5
5
  "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
6
6
  "keywords": [
@@ -106,12 +106,12 @@
106
106
  "dependencies": {
107
107
  "@better-auth/passkey": "1.5.5",
108
108
  "@better-auth/sso": "1.5.5",
109
- "@intlayer/api": "8.5.0",
110
- "@intlayer/config": "8.5.0",
111
- "@intlayer/core": "8.5.0",
112
- "@intlayer/dictionaries-entry": "8.5.0",
113
- "@intlayer/editor-react": "8.5.0",
114
- "@intlayer/types": "8.5.0",
109
+ "@intlayer/api": "8.5.1",
110
+ "@intlayer/config": "8.5.1",
111
+ "@intlayer/core": "8.5.1",
112
+ "@intlayer/dictionaries-entry": "8.5.1",
113
+ "@intlayer/editor-react": "8.5.1",
114
+ "@intlayer/types": "8.5.1",
115
115
  "@radix-ui/react-dialog": "1.1.15",
116
116
  "@radix-ui/react-select": "2.2.6",
117
117
  "@radix-ui/react-slot": "1.2.4",
@@ -120,12 +120,12 @@
120
120
  "better-auth": "1.5.5",
121
121
  "class-variance-authority": "0.7.1",
122
122
  "cmdk": "1.1.1",
123
- "react-intlayer": "8.5.0",
123
+ "react-intlayer": "8.5.1",
124
124
  "rollup-preserve-directives": "1.1.3",
125
125
  "zod": "4.3.6"
126
126
  },
127
127
  "devDependencies": {
128
- "@intlayer/backend": "8.5.0",
128
+ "@intlayer/backend": "8.5.1",
129
129
  "@shikijs/transformers": "4.0.2",
130
130
  "@storybook/addon-a11y": "8.6.14",
131
131
  "@storybook/addon-essentials": "8.6.14",
@@ -154,14 +154,14 @@
154
154
  "@utils/ts-config": "1.0.4",
155
155
  "@utils/ts-config-types": "1.0.4",
156
156
  "fast-glob": "3.3.3",
157
- "intlayer": "8.5.0",
157
+ "intlayer": "8.5.1",
158
158
  "rimraf": "6.1.3",
159
159
  "shiki": "4.0.2",
160
160
  "storybook": "8.6.17",
161
161
  "tsdown": "0.21.4",
162
162
  "typescript": "6.0.2",
163
163
  "vite": "8.0.2",
164
- "vite-intlayer": "8.5.0",
164
+ "vite-intlayer": "8.5.1",
165
165
  "vite-plugin-dts": "4.5.4",
166
166
  "vite-tsconfig-paths": "6.1.1",
167
167
  "vitest": "4.1.1"
@@ -169,7 +169,7 @@
169
169
  "peerDependencies": {
170
170
  "@better-fetch/fetch": "1.1.21",
171
171
  "@hookform/resolvers": "5.2.2",
172
- "@intlayer/backend": "8.5.0",
172
+ "@intlayer/backend": "8.5.1",
173
173
  "@monaco-editor/react": "4.7.0",
174
174
  "@shikijs/transformers": "4.0.2",
175
175
  "@tanstack/react-query": "5.95.2",
@@ -177,12 +177,12 @@
177
177
  "clsx": "2.1.1",
178
178
  "framer-motion": "12.38.0",
179
179
  "fuse.js": "7.1.0",
180
- "intlayer": "8.5.0",
180
+ "intlayer": "8.5.1",
181
181
  "lucide-react": "1.0.1",
182
182
  "react": ">=16.0.0",
183
183
  "react-dom": ">=16.0.0",
184
184
  "react-hook-form": "7.72.0",
185
- "react-intlayer": "8.5.0",
185
+ "react-intlayer": "8.5.1",
186
186
  "shiki": "4.0.2",
187
187
  "tailwind-merge": "3.5.0",
188
188
  "tailwindcss": "4.2.1"