@canonical/react-ds-app-launchpad 0.9.0-experimental.4 → 0.9.0-experimental.6

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 (154) hide show
  1. package/dist/esm/ui/FileTree/Context.js +4 -0
  2. package/dist/esm/ui/FileTree/Context.js.map +1 -0
  3. package/dist/esm/ui/FileTree/Provider.js +74 -0
  4. package/dist/esm/ui/FileTree/Provider.js.map +1 -0
  5. package/dist/esm/ui/FileTree/common/File/File.js +12 -0
  6. package/dist/esm/ui/FileTree/common/File/File.js.map +1 -0
  7. package/dist/esm/ui/FileTree/common/File/index.js +4 -0
  8. package/dist/esm/ui/FileTree/common/File/index.js.map +1 -0
  9. package/dist/esm/ui/FileTree/common/File/types.js +2 -0
  10. package/dist/esm/ui/FileTree/common/File/types.js.map +1 -0
  11. package/dist/esm/ui/FileTree/common/Folder/Folder.js +12 -0
  12. package/dist/esm/ui/FileTree/common/Folder/Folder.js.map +1 -0
  13. package/dist/esm/ui/FileTree/common/Folder/index.js +4 -0
  14. package/dist/esm/ui/FileTree/common/Folder/index.js.map +1 -0
  15. package/dist/esm/ui/FileTree/common/Folder/types.js +2 -0
  16. package/dist/esm/ui/FileTree/common/Folder/types.js.map +1 -0
  17. package/dist/esm/ui/FileTree/common/IndentationBlock/IndentationBlock.js +16 -0
  18. package/dist/esm/ui/FileTree/common/IndentationBlock/IndentationBlock.js.map +1 -0
  19. package/dist/esm/ui/FileTree/common/IndentationBlock/index.js +4 -0
  20. package/dist/esm/ui/FileTree/common/IndentationBlock/index.js.map +1 -0
  21. package/dist/esm/ui/FileTree/common/IndentationBlock/types.js +2 -0
  22. package/dist/esm/ui/FileTree/common/IndentationBlock/types.js.map +1 -0
  23. package/dist/esm/ui/FileTree/common/Node/Context.js +10 -0
  24. package/dist/esm/ui/FileTree/common/Node/Context.js.map +1 -0
  25. package/dist/esm/ui/FileTree/common/Node/Provider.js +163 -0
  26. package/dist/esm/ui/FileTree/common/Node/Provider.js.map +1 -0
  27. package/dist/esm/ui/FileTree/common/Node/hooks/index.js +2 -0
  28. package/dist/esm/ui/FileTree/common/Node/hooks/index.js.map +1 -0
  29. package/dist/esm/ui/FileTree/common/Node/hooks/useNode.js +12 -0
  30. package/dist/esm/ui/FileTree/common/Node/hooks/useNode.js.map +1 -0
  31. package/dist/esm/ui/FileTree/common/Node/index.js +4 -0
  32. package/dist/esm/ui/FileTree/common/Node/index.js.map +1 -0
  33. package/dist/esm/ui/FileTree/common/Node/types.js +2 -0
  34. package/dist/esm/ui/FileTree/common/Node/types.js.map +1 -0
  35. package/dist/esm/ui/FileTree/common/SearchBox/SearchBox.js +31 -0
  36. package/dist/esm/ui/FileTree/common/SearchBox/SearchBox.js.map +1 -0
  37. package/dist/esm/ui/FileTree/common/SearchBox/index.js +4 -0
  38. package/dist/esm/ui/FileTree/common/SearchBox/index.js.map +1 -0
  39. package/dist/esm/ui/FileTree/common/SearchBox/types.js +2 -0
  40. package/dist/esm/ui/FileTree/common/SearchBox/types.js.map +1 -0
  41. package/dist/esm/ui/FileTree/common/TreeView/TreeView.js +60 -0
  42. package/dist/esm/ui/FileTree/common/TreeView/TreeView.js.map +1 -0
  43. package/dist/esm/ui/FileTree/common/TreeView/index.js +4 -0
  44. package/dist/esm/ui/FileTree/common/TreeView/index.js.map +1 -0
  45. package/dist/esm/ui/FileTree/common/TreeView/types.js +2 -0
  46. package/dist/esm/ui/FileTree/common/TreeView/types.js.map +1 -0
  47. package/dist/esm/ui/FileTree/common/index.js +5 -0
  48. package/dist/esm/ui/FileTree/common/index.js.map +1 -0
  49. package/dist/esm/ui/FileTree/hooks/index.js +2 -0
  50. package/dist/esm/ui/FileTree/hooks/index.js.map +1 -0
  51. package/dist/esm/ui/FileTree/hooks/useFileTree.js +11 -0
  52. package/dist/esm/ui/FileTree/hooks/useFileTree.js.map +1 -0
  53. package/dist/esm/ui/FileTree/index.js +10 -0
  54. package/dist/esm/ui/FileTree/index.js.map +1 -0
  55. package/dist/esm/ui/FileTree/styles.css +47 -0
  56. package/dist/esm/ui/FileTree/types.js +2 -0
  57. package/dist/esm/ui/FileTree/types.js.map +1 -0
  58. package/dist/esm/ui/FileTree/utils/hashNodeName.js +11 -0
  59. package/dist/esm/ui/FileTree/utils/hashNodeName.js.map +1 -0
  60. package/dist/esm/ui/FileTree/utils/index.js +2 -0
  61. package/dist/esm/ui/FileTree/utils/index.js.map +1 -0
  62. package/dist/esm/ui/RelativeTime/RelativeTime.js +66 -0
  63. package/dist/esm/ui/RelativeTime/RelativeTime.js.map +1 -0
  64. package/dist/esm/ui/RelativeTime/index.js +4 -0
  65. package/dist/esm/ui/RelativeTime/index.js.map +1 -0
  66. package/dist/esm/ui/RelativeTime/types.js +2 -0
  67. package/dist/esm/ui/RelativeTime/types.js.map +1 -0
  68. package/dist/esm/ui/RelativeTime/utils/constants.js +6 -0
  69. package/dist/esm/ui/RelativeTime/utils/constants.js.map +1 -0
  70. package/dist/esm/ui/RelativeTime/utils/formatHumanTime.js +43 -0
  71. package/dist/esm/ui/RelativeTime/utils/formatHumanTime.js.map +1 -0
  72. package/dist/esm/ui/RelativeTime/utils/getOptimalUpdateInterval.js +24 -0
  73. package/dist/esm/ui/RelativeTime/utils/getOptimalUpdateInterval.js.map +1 -0
  74. package/dist/esm/ui/RelativeTime/utils/index.js +4 -0
  75. package/dist/esm/ui/RelativeTime/utils/index.js.map +1 -0
  76. package/dist/esm/ui/RelativeTime/utils/parseInstant.js +22 -0
  77. package/dist/esm/ui/RelativeTime/utils/parseInstant.js.map +1 -0
  78. package/dist/types/ui/FileTree/Context.d.ts +4 -0
  79. package/dist/types/ui/FileTree/Context.d.ts.map +1 -0
  80. package/dist/types/ui/FileTree/Provider.d.ts +7 -0
  81. package/dist/types/ui/FileTree/Provider.d.ts.map +1 -0
  82. package/dist/types/ui/FileTree/common/File/File.d.ts +10 -0
  83. package/dist/types/ui/FileTree/common/File/File.d.ts.map +1 -0
  84. package/dist/types/ui/FileTree/common/File/index.d.ts +3 -0
  85. package/dist/types/ui/FileTree/common/File/index.d.ts.map +1 -0
  86. package/dist/types/ui/FileTree/common/File/types.d.ts +16 -0
  87. package/dist/types/ui/FileTree/common/File/types.d.ts.map +1 -0
  88. package/dist/types/ui/FileTree/common/Folder/Folder.d.ts +10 -0
  89. package/dist/types/ui/FileTree/common/Folder/Folder.d.ts.map +1 -0
  90. package/dist/types/ui/FileTree/common/Folder/index.d.ts +3 -0
  91. package/dist/types/ui/FileTree/common/Folder/index.d.ts.map +1 -0
  92. package/dist/types/ui/FileTree/common/Folder/types.d.ts +16 -0
  93. package/dist/types/ui/FileTree/common/Folder/types.d.ts.map +1 -0
  94. package/dist/types/ui/FileTree/common/IndentationBlock/IndentationBlock.d.ts +10 -0
  95. package/dist/types/ui/FileTree/common/IndentationBlock/IndentationBlock.d.ts.map +1 -0
  96. package/dist/types/ui/FileTree/common/IndentationBlock/index.d.ts +3 -0
  97. package/dist/types/ui/FileTree/common/IndentationBlock/index.d.ts.map +1 -0
  98. package/dist/types/ui/FileTree/common/IndentationBlock/types.d.ts +12 -0
  99. package/dist/types/ui/FileTree/common/IndentationBlock/types.d.ts.map +1 -0
  100. package/dist/types/ui/FileTree/common/Node/Context.d.ts +5 -0
  101. package/dist/types/ui/FileTree/common/Node/Context.d.ts.map +1 -0
  102. package/dist/types/ui/FileTree/common/Node/Provider.d.ts +6 -0
  103. package/dist/types/ui/FileTree/common/Node/Provider.d.ts.map +1 -0
  104. package/dist/types/ui/FileTree/common/Node/hooks/index.d.ts +2 -0
  105. package/dist/types/ui/FileTree/common/Node/hooks/index.d.ts.map +1 -0
  106. package/dist/types/ui/FileTree/common/Node/hooks/useNode.d.ts +3 -0
  107. package/dist/types/ui/FileTree/common/Node/hooks/useNode.d.ts.map +1 -0
  108. package/dist/types/ui/FileTree/common/Node/index.d.ts +5 -0
  109. package/dist/types/ui/FileTree/common/Node/index.d.ts.map +1 -0
  110. package/dist/types/ui/FileTree/common/Node/types.d.ts +28 -0
  111. package/dist/types/ui/FileTree/common/Node/types.d.ts.map +1 -0
  112. package/dist/types/ui/FileTree/common/SearchBox/SearchBox.d.ts +10 -0
  113. package/dist/types/ui/FileTree/common/SearchBox/SearchBox.d.ts.map +1 -0
  114. package/dist/types/ui/FileTree/common/SearchBox/index.d.ts +3 -0
  115. package/dist/types/ui/FileTree/common/SearchBox/index.d.ts.map +1 -0
  116. package/dist/types/ui/FileTree/common/SearchBox/types.d.ts +12 -0
  117. package/dist/types/ui/FileTree/common/SearchBox/types.d.ts.map +1 -0
  118. package/dist/types/ui/FileTree/common/TreeView/TreeView.d.ts +16 -0
  119. package/dist/types/ui/FileTree/common/TreeView/TreeView.d.ts.map +1 -0
  120. package/dist/types/ui/FileTree/common/TreeView/index.d.ts +3 -0
  121. package/dist/types/ui/FileTree/common/TreeView/index.d.ts.map +1 -0
  122. package/dist/types/ui/FileTree/common/TreeView/types.d.ts +20 -0
  123. package/dist/types/ui/FileTree/common/TreeView/types.d.ts.map +1 -0
  124. package/dist/types/ui/FileTree/common/index.d.ts +5 -0
  125. package/dist/types/ui/FileTree/common/index.d.ts.map +1 -0
  126. package/dist/types/ui/FileTree/hooks/index.d.ts +2 -0
  127. package/dist/types/ui/FileTree/hooks/index.d.ts.map +1 -0
  128. package/dist/types/ui/FileTree/hooks/useFileTree.d.ts +3 -0
  129. package/dist/types/ui/FileTree/hooks/useFileTree.d.ts.map +1 -0
  130. package/dist/types/ui/FileTree/index.d.ts +5 -0
  131. package/dist/types/ui/FileTree/index.d.ts.map +1 -0
  132. package/dist/types/ui/FileTree/types.d.ts +69 -0
  133. package/dist/types/ui/FileTree/types.d.ts.map +1 -0
  134. package/dist/types/ui/FileTree/utils/hashNodeName.d.ts +3 -0
  135. package/dist/types/ui/FileTree/utils/hashNodeName.d.ts.map +1 -0
  136. package/dist/types/ui/FileTree/utils/index.d.ts +2 -0
  137. package/dist/types/ui/FileTree/utils/index.d.ts.map +1 -0
  138. package/dist/types/ui/RelativeTime/RelativeTime.d.ts +11 -0
  139. package/dist/types/ui/RelativeTime/RelativeTime.d.ts.map +1 -0
  140. package/dist/types/ui/RelativeTime/index.d.ts +3 -0
  141. package/dist/types/ui/RelativeTime/index.d.ts.map +1 -0
  142. package/dist/types/ui/RelativeTime/types.d.ts +36 -0
  143. package/dist/types/ui/RelativeTime/types.d.ts.map +1 -0
  144. package/dist/types/ui/RelativeTime/utils/constants.d.ts +6 -0
  145. package/dist/types/ui/RelativeTime/utils/constants.d.ts.map +1 -0
  146. package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts +21 -0
  147. package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts.map +1 -0
  148. package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts +8 -0
  149. package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts.map +1 -0
  150. package/dist/types/ui/RelativeTime/utils/index.d.ts +4 -0
  151. package/dist/types/ui/RelativeTime/utils/index.d.ts.map +1 -0
  152. package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts +9 -0
  153. package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts.map +1 -0
  154. package/package.json +4 -3
@@ -0,0 +1,16 @@
1
+ import type React from "react";
2
+ import type { TreeViewProps } from "./types.js";
3
+ /**
4
+ * Render a tree view of the given file tree data
5
+ *
6
+ * @example
7
+ * <FileTree>
8
+ * <FileTree.SearchBox />
9
+ * <FileTree.TreeView tree={treeData} />
10
+ * </FileTree>
11
+ *
12
+ * @returns {React.ReactElement} - Rendered TreeView
13
+ */
14
+ declare const TreeView: ({ tree, sortAlphabetically, defaultCollapsed, }: TreeViewProps) => React.ReactElement;
15
+ export default TreeView;
16
+ //# sourceMappingURL=TreeView.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/TreeView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,QAAQ,oDAIX,aAAa,KAAG,KAAK,CAAC,YA6DxB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as TreeView } from "./TreeView.js";
2
+ export * from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,cAAc,YAAY,CAAC"}
@@ -0,0 +1,20 @@
1
+ import type { FileTreeData } from "../../types.js";
2
+ export interface TreeViewProps {
3
+ /**
4
+ * The list of files and folders to display in the tree
5
+ */
6
+ tree: FileTreeData[];
7
+ /**
8
+ * Should the tree be sorted alphabetically
9
+ *
10
+ * @default false
11
+ */
12
+ sortAlphabetically?: boolean;
13
+ /**
14
+ * The default collapsed state of each folder in the tree
15
+ *
16
+ * @default false
17
+ */
18
+ defaultCollapsed?: boolean;
19
+ }
20
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/FileTree/common/TreeView/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
@@ -0,0 +1,5 @@
1
+ export * from "./File/index.js";
2
+ export * from "./Folder/index.js";
3
+ export * from "./SearchBox/index.js";
4
+ export * from "./TreeView/index.js";
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/FileTree/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as useFileTree } from "./useFileTree.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/FileTree/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,3 @@
1
+ declare const useFileTree: () => import("../types.js").ContextOptions;
2
+ export default useFileTree;
3
+ //# sourceMappingURL=useFileTree.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFileTree.d.ts","sourceRoot":"","sources":["../../../../../src/ui/FileTree/hooks/useFileTree.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,WAAW,4CAMhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,5 @@
1
+ export * from "./hooks/index.js";
2
+ export type { FileTreeData, FileNode as FileTreeFileNode, FolderNode as FileTreeFolderNode, } from "./types.js";
3
+ import type { FileTreeComponent } from "./types.js";
4
+ export declare const FileTree: FileTreeComponent;
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/FileTree/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,YAAY,EACV,YAAY,EACZ,QAAQ,IAAI,gBAAgB,EAC5B,UAAU,IAAI,kBAAkB,GACjC,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEpD,eAAO,MAAM,QAAQ,EAAe,iBAAiB,CAAC"}
@@ -0,0 +1,69 @@
1
+ import type { AllOrNone } from "@canonical/utils";
2
+ import type React from "react";
3
+ import type { FileProps, FolderProps, SearchBoxProps, TreeViewProps } from "./common/index.js";
4
+ export type BaseNode = {
5
+ name: string;
6
+ path?: string;
7
+ };
8
+ export type FileNode = BaseNode & {
9
+ type: "file";
10
+ marker?: React.ReactNode;
11
+ };
12
+ export type FolderNode = BaseNode & {
13
+ type: "folder";
14
+ children?: Array<FileTreeData>;
15
+ };
16
+ export type FileTreeData = FolderNode | FileNode;
17
+ export type SearchOptions = {
18
+ /**
19
+ * Files and folders to display if matching the search query.
20
+ */
21
+ searchQuery: string;
22
+ /**
23
+ * Callback to update the search query.
24
+ */
25
+ onSearch: (query: string) => void;
26
+ };
27
+ export type ExpansionOptions = {
28
+ /**
29
+ * Whether the folders are expandible (default is `false`).
30
+ */
31
+ expandable: boolean;
32
+ };
33
+ export type FileSelectionOptions = {
34
+ /**
35
+ * The currently selected file item.
36
+ */
37
+ selectedFile: FileTreeData | null;
38
+ /**
39
+ * Callback to select a file item.
40
+ */
41
+ onSelectFile: (node: FileTreeData) => void;
42
+ };
43
+ export type UserContextOptions = AllOrNone<FileSelectionOptions> & AllOrNone<SearchOptions> & AllOrNone<ExpansionOptions>;
44
+ export type ManagedContextOptions = {
45
+ focusNextNode: (direction: "up" | "down") => void;
46
+ focusEndNode: (end: "start" | "end") => void;
47
+ focusNextSiblingCharacter: (character: string) => void;
48
+ };
49
+ export type ContextOptions = UserContextOptions & ManagedContextOptions;
50
+ export type ProviderOptions = {
51
+ /** A unique identifier for the SearchBox */
52
+ id?: string;
53
+ /** Additional CSS classes */
54
+ className?: string;
55
+ /** Inline styles */
56
+ style?: React.CSSProperties;
57
+ /**
58
+ * Consider using `FileTree.Folder` and `FileTree.File` components to build the file tree.
59
+ * And `FileTree.Search` component to add search functionality.
60
+ */
61
+ children?: React.ReactNode;
62
+ } & UserContextOptions;
63
+ export type FileTreeComponent = ((props: ProviderOptions) => React.ReactElement) & {
64
+ SearchBox: (props: SearchBoxProps) => React.ReactElement | null;
65
+ File: (props: FileProps) => React.ReactElement | null;
66
+ Folder: (props: FolderProps) => React.ReactElement | null;
67
+ TreeView: (props: TreeViewProps) => React.ReactElement | null;
68
+ };
69
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/FileTree/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,aAAa,EACd,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEjD,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,SAAS,CAAC,oBAAoB,CAAC,GAC9D,SAAS,CAAC,aAAa,CAAC,GACxB,SAAS,CAAC,gBAAgB,CAAC,CAAC;AAC9B,MAAM,MAAM,qBAAqB,GAAG;IAClC,aAAa,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC;IAC7C,yBAAyB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC;AACF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG;IAC5B,4CAA4C;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAC/B,KAAK,EAAE,eAAe,KACnB,KAAK,CAAC,YAAY,CAAC,GAAG;IACzB,SAAS,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAChE,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACtD,MAAM,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC1D,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC/D,CAAC"}
@@ -0,0 +1,3 @@
1
+ declare const hashNodeName: (name: string) => number;
2
+ export default hashNodeName;
3
+ //# sourceMappingURL=hashNodeName.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hashNodeName.d.ts","sourceRoot":"","sources":["../../../../../src/ui/FileTree/utils/hashNodeName.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,SAAU,MAAM,WAQjC,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default as hashNodeName } from "./hashNodeName.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/FileTree/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type React from "react";
2
+ import type { RelativeTimeProps } from "./types.js";
3
+ /**
4
+ * The RelativeTime component displays timestamps in a human-readable relative format (like "2 hours ago" or "in 3 days").
5
+ *
6
+ * It features automatic live updates with interval optimization based on time distance, configurable "now" threshold,
7
+ * and renders as proper semantic HTML using the <time> element. The component leverages the Temporal API for calculations and Intl.RelativeTimeFormat for localization.
8
+ */
9
+ declare const RelativeTime: ({ id, className, style, time, relativeTimeFormat, nowThreshold, disableLiveUpdate, nowKeyword, invalidDateKeyword, }: RelativeTimeProps) => React.ReactElement;
10
+ export default RelativeTime;
11
+ //# sourceMappingURL=RelativeTime.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RelativeTime.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AASpD;;;;;GAKG;AACH,QAAA,MAAM,YAAY,yHAUf,iBAAiB,KAAG,KAAK,CAAC,YA0E5B,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as RelativeTime } from "./RelativeTime.js";
2
+ export * from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC5D,cAAc,YAAY,CAAC"}
@@ -0,0 +1,36 @@
1
+ import type { Temporal } from "@js-temporal/polyfill";
2
+ import type React from "react";
3
+ export interface RelativeTimeProps {
4
+ /** A unique identifier for the RelativeTime */
5
+ id?: string;
6
+ /** Additional CSS classes */
7
+ className?: string;
8
+ /** Inline styles */
9
+ style?: React.CSSProperties;
10
+ /**
11
+ * The time to be displayed as a relative time (ISO string or Date object).
12
+ */
13
+ time: string | Date | Temporal.Instant;
14
+ /**
15
+ * Disable live duration updates (default: false).
16
+ */
17
+ disableLiveUpdate?: boolean;
18
+ /**
19
+ * custom relative time format (default: local language and narrow style).
20
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
21
+ */
22
+ relativeTimeFormat?: Intl.RelativeTimeFormat;
23
+ /**
24
+ * The threshold in seconds for when to display the relative time as "just now" (default is 10).
25
+ */
26
+ nowThreshold?: number;
27
+ /**
28
+ * The keyword to use for "now" (default: "now")
29
+ */
30
+ nowKeyword?: string;
31
+ /**
32
+ * The keyword to use when the given time is not a valid. (default: "invalid date")
33
+ */
34
+ invalidDateKeyword?: string;
35
+ }
36
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC;IAE7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
@@ -0,0 +1,6 @@
1
+ export declare const MINUTE_IN_SECONDS = 60;
2
+ export declare const HOUR_IN_SECONDS: number;
3
+ export declare const DAY_IN_SECONDS: number;
4
+ export declare const MONTH_IN_SECONDS: number;
5
+ export declare const YEAR_IN_SECONDS: number;
6
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,QAAyB,CAAC;AACtD,eAAO,MAAM,cAAc,QAAuB,CAAC;AACnD,eAAO,MAAM,gBAAgB,QAAsB,CAAC;AACpD,eAAO,MAAM,eAAe,QAAuB,CAAC"}
@@ -0,0 +1,21 @@
1
+ import { Temporal } from "@js-temporal/polyfill";
2
+ type FormatterOptions = {
3
+ /** The threshold in seconds for considering the time as "now". */
4
+ nowThreshold: number;
5
+ /** The keyword to use for "now". */
6
+ nowKeyword: string;
7
+ /**
8
+ * The Intl.RelativeTimeFormat instance to use for formatting.
9
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
10
+ */
11
+ relativeTimeFormat: Intl.RelativeTimeFormat;
12
+ };
13
+ /**
14
+ * Formats a given instant as a human-readable time relative to the current time.
15
+ * @param instant The instant to format.
16
+ * @param options The options to use for formatting.
17
+ * @returns A human-readable relative time string
18
+ */
19
+ declare function formatHumanTime(instant: Temporal.Instant, options: FormatterOptions): string;
20
+ export default formatHumanTime;
21
+ //# sourceMappingURL=formatHumanTime.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"formatHumanTime.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/formatHumanTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,gBAAgB,GAAG;IACtB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;CAC7C,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,eAAe,CACtB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAwCR;AAED,eAAe,eAAe,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { Temporal } from "@js-temporal/polyfill";
2
+ /**
3
+ * Calcualte the optimal update interval for a given instant based on the time distance from now.
4
+ * @returns The optimal update interval in milliseconds.
5
+ */
6
+ declare function getOptimalUpdateInterval(instant: Temporal.Instant): number;
7
+ export default getOptimalUpdateInterval;
8
+ //# sourceMappingURL=getOptimalUpdateInterval.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"getOptimalUpdateInterval.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/getOptimalUpdateInterval.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD;;;GAGG;AACH,iBAAS,wBAAwB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAkBnE;AAED,eAAe,wBAAwB,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default as formatHumanTime } from "./formatHumanTime.js";
2
+ export { default as getOptimalUpdateInterval } from "./getOptimalUpdateInterval.js";
3
+ export { default as parseInstant } from "./parseInstant.js";
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { Temporal } from "@js-temporal/polyfill";
2
+ /**
3
+ * Parser for Temporal.Instant.
4
+ * @param time - instance, date or string to parse
5
+ * @throws Error if time is invalid
6
+ */
7
+ declare function parseInstant(time: Temporal.Instant | Date | string): Temporal.Instant;
8
+ export default parseInstant;
9
+ //# sourceMappingURL=parseInstant.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"parseInstant.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/parseInstant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;GAIG;AACH,iBAAS,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,MAAM,oBAc3D;AAED,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-ds-app-launchpad",
3
- "version": "0.9.0-experimental.4",
3
+ "version": "0.9.0-experimental.6",
4
4
  "type": "module",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -38,9 +38,10 @@
38
38
  "test:vitest:watch": "vitest"
39
39
  },
40
40
  "dependencies": {
41
- "@canonical/storybook-config": "^0.9.0-experimental.2",
41
+ "@canonical/storybook-config": "^0.9.0-experimental.5",
42
42
  "@canonical/styles": "^0.9.0-experimental.2",
43
43
  "@canonical/utils": "^0.9.0-experimental.4",
44
+ "@js-temporal/polyfill": "^0.4.4",
44
45
  "highlight.js": "^11.11.1",
45
46
  "react": "^19.0.0",
46
47
  "react-dom": "^19.0.0"
@@ -68,5 +69,5 @@
68
69
  "vite-tsconfig-paths": "^5.1.4",
69
70
  "vitest": "^2.1.8"
70
71
  },
71
- "gitHead": "1d084380afa970ea924d774ced9c2a3f6a6c027e"
72
+ "gitHead": "88907393fcb7f317006ac5198c849fd6ba0b8c0b"
72
73
  }