@fibery/ui-kit 1.40.2 → 1.40.4

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 (87) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.json +4 -7
  3. package/src/__snapshots__/design-system.test.ts.snap +7265 -0
  4. package/src/a11y-color.test.ts +181 -0
  5. package/src/a11y-color.ts +13 -20
  6. package/src/actions-menu/actions-menu-item.tsx +7 -7
  7. package/src/antd/ant-modal.tsx +10 -5
  8. package/src/antd/styles.ts +6 -6
  9. package/src/app-icon-with-fallback.tsx +2 -2
  10. package/src/app-icon.tsx +2 -2
  11. package/src/button/button.tsx +1 -0
  12. package/src/button/make-button-colors.ts +5 -13
  13. package/src/checkbox.tsx +2 -2
  14. package/src/color-picker/ColorPickerOrLoader.js +2 -2
  15. package/src/color-utils.test.ts +317 -0
  16. package/src/color-utils.ts +180 -0
  17. package/src/comment.tsx +3 -2
  18. package/src/context-menu/index.tsx +12 -7
  19. package/src/create-inline-theme.ts +9 -8
  20. package/src/design-system.colors.ts +760 -0
  21. package/src/design-system.test.ts +287 -7
  22. package/src/design-system.ts +146 -940
  23. package/src/dropdown-menu/index.tsx +21 -16
  24. package/src/emoji-picker/app-icon-picker.tsx +5 -5
  25. package/src/emoji-picker/emoji-picker-content-with-color.tsx +4 -4
  26. package/src/emoji-picker/icon-emoji-picker.tsx +2 -2
  27. package/src/favorites-icon.tsx +1 -1
  28. package/src/file-item/file-icon.tsx +169 -0
  29. package/src/file-item/file-menu-items.tsx +68 -0
  30. package/src/file-item/file-preview-actions.tsx +38 -0
  31. package/src/file-item/file-title.tsx +48 -0
  32. package/src/file-item/types.ts +27 -0
  33. package/src/file-item/use-register-in-image-gallery.tsx +70 -0
  34. package/src/file-item-2.tsx +35 -345
  35. package/src/file-item.tsx +6 -2
  36. package/src/hue-shift.test.ts +91 -0
  37. package/src/icons/Icon.tsx +1 -0
  38. package/src/icons/ast/FileCounter.ts +8 -0
  39. package/src/icons/ast/FileMultiple.ts +8 -0
  40. package/src/icons/ast/Print.ts +8 -0
  41. package/src/icons/ast/ValueEdit.ts +8 -0
  42. package/src/icons/ast/index.tsx +4 -0
  43. package/src/icons/react/Dividers.tsx +1 -1
  44. package/src/icons/react/FileCounter.tsx +13 -0
  45. package/src/icons/react/FileMultiple.tsx +13 -0
  46. package/src/icons/react/Print.tsx +13 -0
  47. package/src/icons/react/ValueEdit.tsx +13 -0
  48. package/src/icons/react/index.tsx +4 -0
  49. package/src/icons/svg/file-counter.svg +3 -0
  50. package/src/icons/svg/file-multiple.svg +3 -0
  51. package/src/icons/svg/print.svg +3 -0
  52. package/src/icons/svg/value-edit.svg +3 -0
  53. package/src/images-gallery/slide-buttons.tsx +4 -11
  54. package/src/lists/actions-menu-row-surface.tsx +5 -5
  55. package/src/mobile-keyboard-aware-popup.tsx +4 -3
  56. package/src/palette-generator.test.ts +566 -0
  57. package/src/palette-generator.ts +166 -0
  58. package/src/palette.ts +71 -55
  59. package/src/platform.ts +0 -3
  60. package/src/popover/index.tsx +20 -28
  61. package/src/progress.tsx +2 -2
  62. package/src/reactions/reaction-button.tsx +12 -6
  63. package/src/root-theme-provider.test.tsx +316 -0
  64. package/src/scale-generator.ts +347 -0
  65. package/src/select/components/menu-list-virtualized.tsx +7 -22
  66. package/src/select/components/menu.tsx +12 -2
  67. package/src/select/select.tsx +2 -1
  68. package/src/select/styles.ts +0 -1
  69. package/src/static-palettes.ts +146 -0
  70. package/src/thematic-color-picker.tsx +266 -0
  71. package/src/thematic-constants.tsx +27 -0
  72. package/src/thematic-controls.tsx +144 -0
  73. package/src/thematic-scales.tsx +122 -0
  74. package/src/thematic-state.ts +333 -0
  75. package/src/thematic.tsx +382 -0
  76. package/src/theme-provider.test.tsx +808 -0
  77. package/src/theme-provider.tsx +132 -69
  78. package/src/theme-settings.ts +1 -1
  79. package/src/theme-styles.ts +12 -5
  80. package/src/toast/toast-action.tsx +1 -1
  81. package/src/toggle-on-off.tsx +2 -2
  82. package/src/toggle.tsx +5 -6
  83. package/src/tooltip.tsx +13 -10
  84. package/src/type-badge.tsx +3 -3
  85. package/src/unit/styles.ts +2 -2
  86. package/src/unit/unit-with-tooltip.tsx +3 -2
  87. package/src/use-long-press.tsx +2 -2
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import FileMultipleSvg from '../ast/FileMultiple';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const FileMultiple = forwardRef<SVGSVGElement, IconBaseProps>(function FileMultiple(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={FileMultipleSvg} />});
12
+
13
+ export default FileMultiple;
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import PrintSvg from '../ast/Print';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const Print = forwardRef<SVGSVGElement, IconBaseProps>(function Print(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={PrintSvg} />});
12
+
13
+ export default Print;
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import ValueEditSvg from '../ast/ValueEdit';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const ValueEdit = forwardRef<SVGSVGElement, IconBaseProps>(function ValueEdit(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={ValueEditSvg} />});
12
+
13
+ export default ValueEdit;
@@ -133,9 +133,11 @@ export { default as Fields } from './Fields';
133
133
  export { default as Figma } from './Figma';
134
134
  export { default as FileArchive } from './FileArchive';
135
135
  export { default as FileBroken } from './FileBroken';
136
+ export { default as FileCounter } from './FileCounter';
136
137
  export { default as FileDocument } from './FileDocument';
137
138
  export { default as FileDownload } from './FileDownload';
138
139
  export { default as FileImage } from './FileImage';
140
+ export { default as FileMultiple } from './FileMultiple';
139
141
  export { default as FilePresentation } from './FilePresentation';
140
142
  export { default as FileTable } from './FileTable';
141
143
  export { default as FileUpload } from './FileUpload';
@@ -247,6 +249,7 @@ export { default as Popup } from './Popup';
247
249
  export { default as Posts } from './Posts';
248
250
  export { default as PresentPlay } from './PresentPlay';
249
251
  export { default as PresentStop } from './PresentStop';
252
+ export { default as Print } from './Print';
250
253
  export { default as PrivateItems } from './PrivateItems';
251
254
  export { default as Question } from './Question';
252
255
  export { default as QuickFilterPersonal } from './QuickFilterPersonal';
@@ -403,6 +406,7 @@ export { default as UserGroupRemove } from './UserGroupRemove';
403
406
  export { default as UserGroup } from './UserGroup';
404
407
  export { default as UserRole } from './UserRole';
405
408
  export { default as UserX } from './UserX';
409
+ export { default as ValueEdit } from './ValueEdit';
406
410
  export { default as ViewAi } from './ViewAi';
407
411
  export { default as ViewBoard } from './ViewBoard';
408
412
  export { default as ViewCalendar } from './ViewCalendar';
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
2
+ <path d="M11.7422 1.5C11.9405 1.5 12.131 1.5787 12.2715 1.71875L16.7764 6.21582C16.9173 6.35652 16.9971 6.54787 16.9971 6.74707C16.9971 7.16128 16.6613 7.49707 16.2471 7.49707H12.5752C12.1555 7.49702 11.7528 7.33009 11.4561 7.0332C11.1593 6.73627 10.9932 6.33301 10.9932 5.91309V3H5.74512C5.05516 3.00008 4.49609 3.55969 4.49609 4.25V15.75C4.4961 16.4403 5.05519 16.9999 5.74512 17H9.24707C9.66106 17.0003 9.99707 17.3359 9.99707 17.75C9.99707 18.1641 9.66106 18.4997 9.24707 18.5H5.74512C4.22716 18.4999 2.99708 17.2687 2.99707 15.75V4.25C2.99707 2.73127 4.22713 1.50008 5.74512 1.5H11.7422ZM13.915 9.5C15.5831 9.5 16.7099 10.4017 16.71 11.7812C16.71 12.8741 15.9933 13.5907 15.0635 13.7998V13.8359C16.2395 13.9553 17 14.708 17 15.8965C16.9998 17.461 15.7579 18.5 13.9258 18.5C12.422 18.4999 11.4979 17.7893 11.126 16.9414C11.0385 16.7443 11 16.5532 11 16.374C11 15.9082 11.2736 15.6152 11.7275 15.6152C12.0556 15.6153 12.2637 15.7586 12.4277 16.0869C12.7067 16.69 13.133 17.0487 13.9531 17.0488C14.7626 17.0488 15.3213 16.535 15.3213 15.8184C15.3267 14.9823 14.7628 14.5166 13.8057 14.5166H13.4609C13.0621 14.5165 12.8322 14.2599 12.832 13.8721C12.832 13.4959 13.0619 13.2325 13.4609 13.2324H13.7842C14.61 13.2323 15.1455 12.7428 15.1455 12.0381C15.1455 11.3454 14.7193 10.8858 13.9209 10.8857C13.2538 10.8857 12.8488 11.19 12.5918 11.7988C12.4113 12.2049 12.2195 12.3545 11.8477 12.3545C11.3883 12.3544 11.1533 12.0619 11.1533 11.626C11.1533 11.423 11.1914 11.2499 11.2734 11.0469C11.6234 10.2048 12.5204 9.50006 13.915 9.5ZM12.4922 5.91309C12.4922 5.93519 12.501 5.95703 12.5166 5.97266C12.5322 5.98808 12.5533 5.99702 12.5752 5.99707H14.4346L12.4922 4.05762V5.91309Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
2
+ <path d="M12.7419 1C12.9402 1 13.1307 1.07879 13.2712 1.21875L17.7761 5.71582C17.917 5.85652 17.9968 6.04787 17.9968 6.24707V12.25C17.9968 13.7687 16.7658 14.9999 15.2478 15H14.7751C14.5919 16.1211 13.7232 17.0562 12.5417 17.2647L6.13741 18.3936C4.64259 18.657 3.21768 17.6586 2.95381 16.1631L1.47724 7.79199C1.21353 6.29634 2.21183 4.87012 3.70674 4.60645L5.99678 4.20215V3.75C5.99678 2.23136 7.22697 1.00023 8.74484 1H12.7419ZM3.96651 6.08399C3.28733 6.20398 2.8342 6.85167 2.95381 7.53125L4.4294 15.9023C4.54925 16.5821 5.1973 17.0365 5.87667 16.917L12.281 15.7871C12.7301 15.7079 13.0789 15.3975 13.2302 15H8.74484C7.22701 14.9997 5.99679 13.7686 5.99678 12.25V5.72559L3.96651 6.08399ZM8.74484 2.5C8.05501 2.50023 7.49581 3.05979 7.49581 3.75V12.25C7.49581 12.9402 8.05504 13.4997 8.74484 13.5H15.2478C15.9377 13.4999 16.4968 12.9403 16.4968 12.25V6.99707H13.5749C13.1554 6.99695 12.7525 6.83003 12.4558 6.5332C12.1591 6.23629 11.9929 5.83295 11.9929 5.41309V2.5H8.74484ZM13.4919 5.41309C13.4919 5.43512 13.5008 5.45704 13.5163 5.47266C13.5318 5.48802 13.5531 5.49695 13.5749 5.49707H15.4343L13.4919 3.55762V5.41309Z" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.75 2.25C14.9926 2.25 16 3.25736 16 4.5V7.0498C17.1411 7.28143 18 8.29051 18 9.5V15.5C18 16.8807 16.8807 18 15.5 18H4.5C3.11929 18 2 16.8807 2 15.5V9.5C2 8.29051 2.85886 7.28142 4 7.0498V4.5C4 3.25736 5.00736 2.25 6.25 2.25H13.75ZM4.5 8.5C3.94771 8.5 3.5 9.05709 3.5 9.60938V15.5C3.5 16.0523 3.94771 16.5 4.5 16.5H8V14.5C8 14.2239 8.22386 14 8.5 14H14.5C14.7761 14 15 14.2239 15 14.5V16.5H15.5C16.0523 16.5 16.5 16.0523 16.5 15.5V9.5C16.5 8.94771 16.0523 8.5 15.5 8.5H4.5ZM8 10C8.41421 10 8.75 10.3358 8.75 10.75C8.75 11.1642 8.41421 11.5 8 11.5H5.5C5.08579 11.5 4.75 11.1642 4.75 10.75C4.75 10.3358 5.08579 10 5.5 10H8ZM6.25 3.75C5.83579 3.75 5.5 4.08579 5.5 4.5V7H14.5V4.5C14.5 4.08579 14.1642 3.75 13.75 3.75H6.25Z"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 6.25C3.5 5.83579 3.83579 5.5 4.25 5.5H15.75C16.1642 5.5 16.5 5.83579 16.5 6.25V8.25C16.5 8.66421 16.8358 9 17.25 9C17.6642 9 18 8.66421 18 8.25V6.25C18 5.00736 16.9926 4 15.75 4H4.25C3.00736 4 2 5.00736 2 6.25V11.75C2 12.9926 3.00736 14 4.25 14H12C12.4142 14 12.75 13.6642 12.75 13.25C12.75 12.8358 12.4142 12.5 12 12.5H4.25C3.83579 12.5 3.5 12.1642 3.5 11.75V6.25ZM5.75 8.25C5.33579 8.25 5 8.58579 5 9C5 9.41421 5.33579 9.75 5.75 9.75H8.25C8.66421 9.75 9 9.41421 9 9C9 8.58579 8.66421 8.25 8.25 8.25H5.75ZM14.75 10.25C14.3358 10.25 14 10.5858 14 11C14 11.4142 14.3358 11.75 14.75 11.75H15.75V16.25H14.75C14.3358 16.25 14 16.5858 14 17C14 17.4142 14.3358 17.75 14.75 17.75H18.25C18.6642 17.75 19 17.4142 19 17C19 16.5858 18.6642 16.25 18.25 16.25H17.25V11.75H18.25C18.6642 11.75 19 11.4142 19 11C19 10.5858 18.6642 10.25 18.25 10.25H14.75Z" fill="black"/>
3
+ </svg>
@@ -1,5 +1,5 @@
1
1
  import {PhotoSwipe} from "photoswipe/lightbox";
2
- import {useEffect, useMemo, useState} from "react";
2
+ import {useEffect, useState} from "react";
3
3
  import {css} from "@linaria/core";
4
4
  import {IconButton} from "../button/icon-button";
5
5
  import Back from "../icons/react/Back";
@@ -9,7 +9,7 @@ import LoupeZoomOut from "../icons/react/LoupeZoomOut";
9
9
  import RicheditorOpenLink from "../icons/react/RicheditorOpenLink";
10
10
  import Link from "../icons/react/Link";
11
11
  import Close from "../icons/react/Close";
12
- import {colors, createInlineTheme, getThemeColors, space} from "../design-system";
12
+ import {space, themeVars} from "../design-system";
13
13
  import {safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
14
14
  import {Button} from "../button/button";
15
15
  import {copyUrlToClipboard} from "../copy-to-clipboard";
@@ -75,17 +75,12 @@ export function SlideButtons({
75
75
  };
76
76
  }, [items, pswp]);
77
77
 
78
- const {theme, styles} = useMemo(() => {
79
- const theme = getThemeColors(colors.brandColors.blue, "dark");
80
- return {theme, styles: createInlineTheme(theme, emptyArray)};
81
- }, []);
82
-
83
78
  const isPhone = useIsPhone();
84
79
 
85
80
  return (
86
81
  <ToastProvider toastQueue={toastQueue}>
87
- <ThemeProvider theme={theme}>
88
- <div style={styles} className={wrapper}>
82
+ <ThemeProvider color={themeVars.brandColors.blue} mode="dark">
83
+ <div className={wrapper}>
89
84
  <div className={barClassName}>
90
85
  {slideState.src ? <CopyURLButton pswp={pswp} showUI={uiHandlers.showUI} /> : null}
91
86
  <ZoomButton pswp={pswp} showUI={uiHandlers.showUI} />
@@ -271,8 +266,6 @@ function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
271
266
  );
272
267
  }
273
268
 
274
- const emptyArray: string[] = [];
275
-
276
269
  function getSlideData(pswp: PhotoSwipe, items: {src: string; actions?: React.ReactNode}[]) {
277
270
  return {
278
271
  currIndex: pswp.currIndex,
@@ -6,16 +6,16 @@ import {forwardRef, useId} from "react";
6
6
  import {useActionsMenuContext} from "../actions-menu";
7
7
  import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
8
8
  import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
9
- import {colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
9
+ import {layout, lineHeight, space, textStyles, themeVars} from "../design-system";
10
10
  import {useIsSupportHover} from "../use-is-support-hover";
11
11
  import {
12
12
  ListRowContent,
13
13
  ListRowContentProps,
14
14
  ListRowSurfaceProps,
15
+ listRowSurfaceStylesBase,
15
16
  NATURAL_FOCUS_CLASS,
16
- NATURAL_HOVER_CLASS,
17
17
  NATURAL_HOVER,
18
- listRowSurfaceStylesBase,
18
+ NATURAL_HOVER_CLASS,
19
19
  } from "./list-row-surface";
20
20
 
21
21
  interface ActionMenuItemSurfaceProps
@@ -55,11 +55,11 @@ export const actionMenuItemSurface = css`
55
55
  }
56
56
  &.warm {
57
57
  background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
58
- color: ${colors.inversedTextColor};
58
+ color: ${themeVars.inversedTextColor};
59
59
  ${NATURAL_HOVER}, &.hover,
60
60
  &[data-highlighted] {
61
61
  background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
62
- color: ${colors.inversedTextColor};
62
+ color: ${themeVars.inversedTextColor};
63
63
  }
64
64
  }
65
65
  `;
@@ -4,6 +4,7 @@ import _ from "lodash";
4
4
  import {css, cx} from "@linaria/core";
5
5
  import {border, space, themeVars} from "./design-system";
6
6
  import {keyboardInsetBottomVar, safeAreaInsetBottomVar} from "./mobile-styles";
7
+ import {ThemeProvider} from "./theme-provider";
7
8
 
8
9
  export const mobileKeyboardAwarePopupZIndex = 1001;
9
10
 
@@ -57,7 +58,7 @@ export function MobileKeyboardAwarePopup({children, className}: {children: React
57
58
  viewport.removeEventListener("resize", viewportHandler);
58
59
  };
59
60
  }, []);
60
- return createPortal(
61
+ const res = (
61
62
  <div
62
63
  ref={ref}
63
64
  className={cx(
@@ -81,7 +82,7 @@ export function MobileKeyboardAwarePopup({children, className}: {children: React
81
82
  )}
82
83
  >
83
84
  {children}
84
- </div>,
85
- document.body
85
+ </div>
86
86
  );
87
+ return createPortal(<ThemeProvider portal>{res}</ThemeProvider>, document.body);
87
88
  }