@fibery/ui-kit 1.38.0 → 1.38.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 (88) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/config/jest/testFrameworkSetup.js +1 -1
  3. package/package.json +16 -15
  4. package/src/abbreviate-name.ts +42 -0
  5. package/src/actions-menu/actions-menu-item.tsx +14 -5
  6. package/src/actions-menu/actions-menu-props.tsx +1 -0
  7. package/src/actions-menu/actions-menu.tsx +4 -1
  8. package/src/actions-menu/context-actions-menu.tsx +22 -0
  9. package/src/animated-height-container.tsx +24 -5
  10. package/src/antd/ant-upload.tsx +1 -1
  11. package/src/antd/input.tsx +4 -0
  12. package/src/avatar.tsx +1 -27
  13. package/src/button/base-button.tsx +2 -0
  14. package/src/button/button.tsx +3 -2
  15. package/src/button/icon-button.tsx +3 -3
  16. package/src/card-container.tsx +3 -2
  17. package/src/checkbox.tsx +17 -0
  18. package/src/collapsible-section.tsx +3 -1
  19. package/src/date-picker/autocomplete.tsx +11 -5
  20. package/src/date-picker/date-range-input.tsx +5 -1
  21. package/src/date-picker/date-range-picker-popup-content.tsx +31 -13
  22. package/src/date-picker/single-date-input.tsx +5 -1
  23. package/src/date-picker/styles.ts +20 -0
  24. package/src/design-system.ts +24 -0
  25. package/src/dropdown-menu/index.tsx +11 -1
  26. package/src/emoji-picker/emoji-picker-preview-footer.tsx +4 -0
  27. package/src/emoji-picker/emoji.tsx +4 -3
  28. package/src/emoji-picker/primitives/emoji.tsx +49 -51
  29. package/src/emoji-picker/primitives/footer.tsx +6 -0
  30. package/src/emoji-picker/primitives/search.tsx +8 -0
  31. package/src/emoji-picker/primitives/skin-tone.tsx +12 -2
  32. package/src/fibermoji-placeholder.tsx +1 -27
  33. package/src/file-item-2.tsx +408 -0
  34. package/src/file-item.tsx +63 -12
  35. package/src/header-layout.tsx +11 -0
  36. package/src/html-styles.ts +13 -4
  37. package/src/icons/ast/Back.ts +1 -1
  38. package/src/icons/ast/ExtensionFiles.ts +1 -1
  39. package/src/icons/ast/FileUpload.ts +1 -1
  40. package/src/icons/ast/SwitchToMention.ts +8 -0
  41. package/src/icons/ast/SwitchToText.ts +8 -0
  42. package/src/icons/ast/SwitchToWidget.ts +8 -0
  43. package/src/icons/ast/ViewGallery.ts +8 -0
  44. package/src/icons/ast/index.tsx +4 -0
  45. package/src/icons/react/SwitchToMention.tsx +13 -0
  46. package/src/icons/react/SwitchToText.tsx +13 -0
  47. package/src/icons/react/SwitchToWidget.tsx +13 -0
  48. package/src/icons/react/ViewGallery.tsx +13 -0
  49. package/src/icons/react/index.tsx +4 -0
  50. package/src/icons/svg/back.svg +3 -1
  51. package/src/icons/svg/extension/files.svg +3 -1
  52. package/src/icons/svg/file-upload.svg +3 -6
  53. package/src/icons/svg/switch-to-mention.svg +3 -0
  54. package/src/icons/svg/switch-to-text.svg +4 -0
  55. package/src/icons/svg/switch-to-widget.svg +4 -0
  56. package/src/icons/svg/view-gallery.svg +4 -0
  57. package/src/images-gallery/images-gallery-fall-through-provider.tsx +11 -0
  58. package/src/images-gallery/images-gallery.tsx +13 -10
  59. package/src/images-gallery/zoom.tsx +13 -2
  60. package/src/images-gallery-2/images-gallery-2.tsx +442 -0
  61. package/src/images-gallery-2/slide-buttons.tsx +230 -0
  62. package/src/images-gallery-2/zoom.tsx +35 -0
  63. package/src/kbd.tsx +46 -0
  64. package/src/modal-menu/modal-menu-item.tsx +10 -2
  65. package/src/modal-menu/modal-menu-trigger.tsx +19 -2
  66. package/src/notification-dot.tsx +16 -7
  67. package/src/platform-symbols.ts +9 -0
  68. package/src/platform.ts +2 -0
  69. package/src/popover/index.tsx +31 -8
  70. package/src/popover/modifiers.tsx +26 -19
  71. package/src/reactions/reaction-button.tsx +323 -101
  72. package/src/reactions/reaction-picker.tsx +14 -1
  73. package/src/reactions/reactions.tsx +11 -1
  74. package/src/reactions/tootltip.tsx +55 -0
  75. package/src/rich-text-embed-error.tsx +2 -1
  76. package/src/select/components/group-heading.tsx +8 -0
  77. package/src/select/components/menu-list-virtualized.tsx +6 -2
  78. package/src/select/components/option.tsx +4 -0
  79. package/src/select/select-control-settings-context.tsx +11 -2
  80. package/src/select/select-in-popover.tsx +10 -7
  81. package/src/select/styles.ts +21 -1
  82. package/src/tab-nav/tab-nav.tsx +1 -1
  83. package/src/toggle.tsx +8 -0
  84. package/src/tooltip.tsx +27 -18
  85. package/src/type-badge.tsx +5 -2
  86. package/src/unit/unit-with-tooltip.tsx +1 -1
  87. package/src/use-is-phone.tsx +27 -6
  88. package/src/shortcut-badge.tsx +0 -29
@@ -0,0 +1,8 @@
1
+
2
+ // This icon file is generated automatically.
3
+
4
+ import { IconDefinition } from '../types';
5
+
6
+ const SwitchToMention: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 12.75A2.25 2.25 0 0 0 4.25 15h11.5A2.25 2.25 0 0 0 18 12.75v-5.5A2.25 2.25 0 0 0 15.75 5H4.25A2.25 2.25 0 0 0 2 7.25v5.5Zm1.5 0c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-5.5a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v5.5Zm6.75-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM6 8.5a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H6Z"},"children":[]}],"metadata":""}]},"name":"switch-to-mention"};
7
+
8
+ export default SwitchToMention;
@@ -0,0 +1,8 @@
1
+
2
+ // This icon file is generated automatically.
3
+
4
+ import { IconDefinition } from '../types';
5
+
6
+ const SwitchToText: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.75 7.25c.305 0 .581.185.696.468l3.25 8a.751.751 0 0 1-1.39.564l-.623-1.532H4.318l-.622 1.532a.751.751 0 0 1-1.39-.564l3.25-8a.75.75 0 0 1 .694-.468h.5Zm-1.823 6h3.147L6.5 9.378 4.927 13.25Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M12.14 2.2a.7.7 0 0 1 .702.713.69.69 0 0 1-.224.508l-.948.93-.117.093.316-.01h2.489c.95 0 1.786.297 2.388.851.603.556.954 1.355.954 2.326 0 .967-.354 1.77-.957 2.328-.602.558-1.44.86-2.385.86h-1.114a.785.785 0 0 1-.518-.173.663.663 0 0 1-.224-.519c0-.211.078-.393.217-.52a.743.743 0 0 1 .505-.183h1.134c.575 0 1.053-.183 1.385-.497.33-.312.533-.77.533-1.355 0-.561-.204-.988-.534-1.277-.334-.29-.814-.456-1.384-.456h-2.495l-.293-.01 1.058 1.023a.696.696 0 0 1 .214.508.698.698 0 0 1-.692.713.698.698 0 0 1-.513-.21l-.002-.001-2.087-2.143a.794.794 0 0 1 0-1.156l2.085-2.12c.137-.149.3-.223.507-.223Z"},"children":[]}],"metadata":""}]},"name":"switch-to-text"};
7
+
8
+ export default SwitchToText;
@@ -0,0 +1,8 @@
1
+
2
+ // This icon file is generated automatically.
3
+
4
+ import { IconDefinition } from '../types';
5
+
6
+ const SwitchToWidget: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.166 5.639a.75.75 0 0 1 .75.75v3.333a.75.75 0 0 1-.75.75H5.833a.75.75 0 0 1-.75-.75V6.389a.75.75 0 0 1 .75-.75h8.333Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.277 2.306a2.973 2.973 0 0 1 2.973 2.972v9.445a2.972 2.972 0 0 1-2.973 2.971H4.723a2.972 2.972 0 0 1-2.97-2.82l-.003-.152V5.278a2.973 2.973 0 0 1 2.973-2.972h10.554Zm-10.554 1.5c-.813 0-1.473.66-1.473 1.472v9.445l.008.15a1.472 1.472 0 0 0 1.465 1.321h10.554c.813 0 1.473-.658 1.473-1.471V5.277c0-.813-.66-1.472-1.473-1.472H4.723Z"},"children":[]}],"metadata":""}]},"name":"switch-to-widget"};
7
+
8
+ export default SwitchToWidget;
@@ -0,0 +1,8 @@
1
+
2
+ // This icon file is generated automatically.
3
+
4
+ import { IconDefinition } from '../types';
5
+
6
+ const ViewGallery: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.5 11A1.5 1.5 0 0 1 9 12.5v2A1.5 1.5 0 0 1 7.5 16h-2A1.5 1.5 0 0 1 4 14.5v-2A1.5 1.5 0 0 1 5.5 11h2Zm7 0a1.5 1.5 0 0 1 1.5 1.5v2a1.5 1.5 0 0 1-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h2Zm-7-7A1.5 1.5 0 0 1 9 5.5v2A1.5 1.5 0 0 1 7.5 9h-2A1.5 1.5 0 0 1 4 7.5v-2A1.5 1.5 0 0 1 5.5 4h2Zm7 0A1.5 1.5 0 0 1 16 5.5v2A1.5 1.5 0 0 1 14.5 9h-2A1.5 1.5 0 0 1 11 7.5v-2A1.5 1.5 0 0 1 12.5 4h2Z"},"children":[]}],"metadata":""}]},"name":"view-gallery"};
7
+
8
+ export default ViewGallery;
@@ -329,6 +329,9 @@ export { default as SpaceTemplate } from './SpaceTemplate';
329
329
  export { default as Spinner } from './Spinner';
330
330
  export { default as Success } from './Success';
331
331
  export { default as SuggestIntegration } from './SuggestIntegration';
332
+ export { default as SwitchToMention } from './SwitchToMention';
333
+ export { default as SwitchToText } from './SwitchToText';
334
+ export { default as SwitchToWidget } from './SwitchToWidget';
332
335
  export { default as TableLayout } from './TableLayout';
333
336
  export { default as Template } from './Template';
334
337
  export { default as TemplatesFilled } from './TemplatesFilled';
@@ -394,6 +397,7 @@ export { default as ViewDetails } from './ViewDetails';
394
397
  export { default as ViewDocument } from './ViewDocument';
395
398
  export { default as ViewFeed } from './ViewFeed';
396
399
  export { default as ViewForm } from './ViewForm';
400
+ export { default as ViewGallery } from './ViewGallery';
397
401
  export { default as ViewGantt } from './ViewGantt';
398
402
  export { default as ViewList } from './ViewList';
399
403
  export { default as ViewMap } from './ViewMap';
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import SwitchToMentionSvg from '../ast/SwitchToMention';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const SwitchToMention = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToMention(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToMentionSvg} />});
12
+
13
+ export default SwitchToMention;
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import SwitchToTextSvg from '../ast/SwitchToText';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const SwitchToText = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToText(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToTextSvg} />});
12
+
13
+ export default SwitchToText;
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import SwitchToWidgetSvg from '../ast/SwitchToWidget';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const SwitchToWidget = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToWidget(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToWidgetSvg} />});
12
+
13
+ export default SwitchToWidget;
@@ -0,0 +1,13 @@
1
+ // This icon file is generated automatically.
2
+
3
+ import {forwardRef} from 'react';
4
+ import ViewGallerySvg from '../ast/ViewGallery';
5
+ import { Icon } from '../Icon';
6
+ import { IconBaseProps } from '../types';
7
+
8
+ const ViewGallery = forwardRef<SVGSVGElement, IconBaseProps>(function ViewGallery(
9
+ props: IconBaseProps,
10
+ ref: React.Ref<SVGSVGElement>
11
+ ) {return <Icon {...props} className={props.className} ref={ref} icon={ViewGallerySvg} />});
12
+
13
+ export default ViewGallery;
@@ -329,6 +329,9 @@ export { default as SpaceTemplate } from './SpaceTemplate';
329
329
  export { default as Spinner } from './Spinner';
330
330
  export { default as Success } from './Success';
331
331
  export { default as SuggestIntegration } from './SuggestIntegration';
332
+ export { default as SwitchToMention } from './SwitchToMention';
333
+ export { default as SwitchToText } from './SwitchToText';
334
+ export { default as SwitchToWidget } from './SwitchToWidget';
332
335
  export { default as TableLayout } from './TableLayout';
333
336
  export { default as Template } from './Template';
334
337
  export { default as TemplatesFilled } from './TemplatesFilled';
@@ -394,6 +397,7 @@ export { default as ViewDetails } from './ViewDetails';
394
397
  export { default as ViewDocument } from './ViewDocument';
395
398
  export { default as ViewFeed } from './ViewFeed';
396
399
  export { default as ViewForm } from './ViewForm';
400
+ export { default as ViewGallery } from './ViewGallery';
397
401
  export { default as ViewGantt } from './ViewGantt';
398
402
  export { default as ViewList } from './ViewList';
399
403
  export { default as ViewMap } from './ViewMap';
@@ -1,2 +1,4 @@
1
1
  <?xml version="1.0" standalone="no"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.54626 15.5842C9.22365 15.8861 8.7174 15.8693 8.41551 15.5467L3.41562 10.2036C3.12407 9.89199 3.12837 9.40643 3.4254 9.10008L8.42529 3.94323C8.73285 3.62602 9.23932 3.61819 9.55653 3.92574C9.87374 4.2333 9.88156 4.73977 9.57401 5.05698L5.88969 8.85696L15.9997 8.85701C16.4415 8.85701 16.7997 9.21519 16.7997 9.65701C16.7997 10.0988 16.4415 10.457 15.9997 10.457L5.84401 10.457L9.58379 14.4535C9.88567 14.7761 9.86887 15.2824 9.54626 15.5842Z" class="uiIcons"></path></svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
3
+ <path d="M7.46967 5.21967C7.76256 4.92678 8.23744 4.92678 8.53033 5.21967C8.82322 5.51256 8.82322 5.98744 8.53033 6.28033L5.56066 9.25H16.25C16.6642 9.25 17 9.58579 17 10C17 10.4142 16.6642 10.75 16.25 10.75H5.56066L8.53033 13.7197C8.82322 14.0126 8.82322 14.4874 8.53033 14.7803C8.23744 15.0732 7.76256 15.0732 7.46967 14.7803L3.21967 10.5303C3.07322 10.3839 3 10.1919 3 10C3 9.89831 3.02024 9.80134 3.05691 9.71291C3.09351 9.62445 3.14776 9.54158 3.21967 9.46967L7.46967 5.21967Z"/>
4
+ </svg>
@@ -1,2 +1,4 @@
1
1
  <?xml version="1.0" standalone="no"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"><path d="M16.8237 9.89711C17.1166 9.60421 17.1166 9.12934 16.8237 8.83645C16.5308 8.54355 16.0559 8.54355 15.763 8.83644L16.8237 9.89711ZM10.1667 15.4934L9.63634 14.9631L9.63634 14.9631L10.1667 15.4934ZM7.33667 16.6657L7.33667 17.4157L7.33667 16.6657ZM3.33444 12.6634H2.58444H3.33444ZM4.50667 9.83344L5.037 10.3638L4.50667 9.83344ZM10.6333 3.70678L10.103 3.17645L10.103 3.17645L10.6333 3.70678ZM12.52 2.92529L12.52 3.67529L12.52 2.92529ZM14.4067 7.48011L14.9367 8.01073L14.937 8.01044L14.4067 7.48011ZM8.27333 13.6068L7.74329 13.0762L7.743 13.0764L8.27333 13.6068ZM6.38667 11.7201L5.85665 11.1895L5.85634 11.1898L6.38667 11.7201ZM12.5767 6.59742C12.8697 6.3047 12.87 5.82982 12.5773 5.53676C12.2846 5.24369 11.8097 5.24341 11.5166 5.53613L12.5767 6.59742ZM15.763 8.83644L9.63634 14.9631L10.697 16.0238L16.8237 9.89711L15.763 8.83644ZM9.63634 14.9631C9.02643 15.573 8.19921 15.9157 7.33667 15.9157L7.33667 17.4157C8.59704 17.4157 9.80578 16.915 10.697 16.0238L9.63634 14.9631ZM7.33667 15.9157C6.47412 15.9157 5.64691 15.573 5.037 14.9631L3.97634 16.0238C4.86755 16.915 6.0763 17.4157 7.33667 17.4157L7.33667 15.9157ZM5.037 14.9631C4.42709 14.3532 4.08444 13.526 4.08444 12.6634H2.58444C2.58444 13.9238 3.08512 15.1326 3.97634 16.0238L5.037 14.9631ZM4.08444 12.6634C4.08444 11.8009 4.42709 10.9737 5.037 10.3638L3.97634 9.30311C3.08512 10.1943 2.58444 11.4031 2.58444 12.6634H4.08444ZM5.037 10.3638L11.1637 4.23711L10.103 3.17645L3.97634 9.30311L5.037 10.3638ZM11.1637 4.23711C11.5234 3.87738 12.0113 3.67529 12.52 3.67529L12.52 2.17529C11.6135 2.17529 10.744 2.53542 10.103 3.17645L11.1637 4.23711ZM12.52 3.67529C13.0287 3.67529 13.5166 3.87738 13.8763 4.23711L14.937 3.17645C14.296 2.53542 13.4265 2.17529 12.52 2.17529L12.52 3.67529ZM13.8763 4.23711C14.2361 4.59683 14.4381 5.08472 14.4381 5.59344L15.9381 5.59344C15.9381 4.68689 15.578 3.81747 14.937 3.17645L13.8763 4.23711ZM14.4381 5.59344C14.4381 6.10217 14.2361 6.59006 13.8763 6.94978L14.937 8.01044C15.578 7.36941 15.9381 6.49999 15.9381 5.59344L14.4381 5.59344ZM13.8766 6.94949L7.74329 13.0762L8.80337 14.1374L14.9367 8.01073L13.8766 6.94949ZM7.743 13.0764C7.63347 13.186 7.4849 13.2475 7.33 13.2475V14.7475C7.88273 14.7475 8.41282 14.5279 8.80366 14.1371L7.743 13.0764ZM7.33 13.2475C7.17509 13.2475 7.02653 13.186 6.917 13.0764L5.85634 14.1371C6.24718 14.5279 6.77727 14.7475 7.33 14.7475V13.2475ZM6.917 13.0764C6.80746 12.9669 6.74592 12.8183 6.74592 12.6634H5.24592C5.24592 13.2162 5.4655 13.7463 5.85634 14.1371L6.917 13.0764ZM6.74592 12.6634C6.74592 12.5085 6.80746 12.36 6.917 12.2504L5.85634 11.1898C5.4655 11.5806 5.24592 12.1107 5.24592 12.6634H6.74592ZM6.91668 12.2508L12.5767 6.59742L11.5166 5.53613L5.85665 11.1895L6.91668 12.2508Z" class="typeIcons"></path></svg>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon">
3
+ <path d="M15.0306 6.0317C15.0305 5.33675 14.7359 4.66988 14.2126 4.17848C13.6893 3.68717 12.9792 3.41128 12.2392 3.41128C11.5917 3.41133 10.9677 3.62289 10.4712 4.00482L10.2657 4.17848L4.83937 9.27507C3.98385 10.0785 3.50287 11.1682 3.50285 12.3044C3.50285 13.4405 3.98384 14.5302 4.83937 15.3336C5.69489 16.1369 6.8554 16.5887 8.06522 16.5887L8.29124 16.5832C9.41871 16.5306 10.4891 16.0868 11.2911 15.3336L16.7174 10.2371C17.0107 9.96164 17.4865 9.96179 17.7799 10.2371C18.0734 10.5126 18.0733 10.9593 17.7799 11.2349L12.3536 16.3315C11.2874 17.3328 9.86457 17.9228 8.3656 17.9926L8.06522 18C6.45682 18 4.91417 17.3994 3.77681 16.3315C2.63944 15.2634 2 13.8148 2 12.3044C2.00001 10.7939 2.63945 9.3453 3.77681 8.27725L9.20312 3.18066L9.35771 3.04284C10.1453 2.37327 11.1718 2.00006 12.2392 2C13.3778 2 14.47 2.42468 15.2752 3.18066C16.0803 3.93673 16.5333 4.96246 16.5334 6.0317L16.5276 6.232C16.4749 7.22853 16.03 8.17385 15.2752 8.88274L9.84888 13.9793C9.43484 14.3681 8.89137 14.6082 8.31374 14.662L8.06522 14.673C7.39628 14.673 6.75462 14.4235 6.28156 13.9793C5.80849 13.5351 5.54188 12.9326 5.54188 12.3044C5.54189 11.6761 5.8085 11.0736 6.28156 10.6294L11.7079 5.53279C12.0012 5.25738 12.477 5.25753 12.7704 5.53279C13.0639 5.80834 13.0638 6.25503 12.7704 6.53061L7.34413 11.6272C7.15291 11.8068 7.04474 12.0504 7.04473 12.3044C7.04473 12.5583 7.15289 12.8019 7.34413 12.9815C7.53534 13.161 7.79486 13.2617 8.06522 13.2617L8.166 13.2571C8.39928 13.2353 8.61909 13.1385 8.78632 12.9815L14.2126 7.88492C14.6706 7.4548 14.9535 6.89084 15.0169 6.2908L15.0306 6.0317Z" class="typeIcons"/>
4
+ </svg>
@@ -1,7 +1,4 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="Icon">
3
- <path d="M42 30V37.2C42 38.8802 42 39.7202 41.673 40.362C41.3854 40.9265 40.9265 41.3854 40.362 41.673C39.7202 42 38.8802 42 37.2 42H10.8C9.11984 42 8.27976 42 7.63803 41.673C7.07354 41.3854 6.6146 40.9265 6.32698 40.362C6 39.7202 6 38.8802 6 37.2V30" stroke="#6E7A83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
4
- <path d="M34 16L24 6L14 16" stroke="#6E7A83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
5
- <path d="M24 6V30" stroke="#6E7A83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.0289 10.7197L10.5301 8.21967C10.2373 7.92678 9.76267 7.92678 9.46992 8.21967L6.97111 10.7197C6.67835 11.0126 6.67835 11.4874 6.97111 11.7803C7.26386 12.0732 7.73851 12.0732 8.03126 11.7803L9.25035 10.5607V14.5C9.25035 14.9142 9.58598 15.25 9.99999 15.25C10.414 15.25 10.7496 14.9142 10.7496 14.5V10.5607L11.9687 11.7803C12.2615 12.0732 12.7361 12.0732 13.0289 11.7803C13.3216 11.4874 13.3216 11.0126 13.0289 10.7197Z" />
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M5.74527 1.5C4.2272 1.5 2.99657 2.73123 2.99658 4.25002L2.99665 15.75C2.99665 17.2688 4.22728 18.5 5.74532 18.5H14.2479C15.766 18.5 16.9966 17.2688 16.9966 15.75V6.74668C16.9966 6.54748 16.9174 6.35646 16.7764 6.21576L12.2719 1.71909C12.1314 1.5788 11.941 1.50001 11.7424 1.50001L5.74527 1.5ZM4.49586 4.25001C4.49586 3.55965 5.05524 3 5.74527 3L10.9928 3.00001V5.91334C10.9928 6.33327 11.1595 6.736 11.4563 7.03293C11.7531 7.32986 12.1556 7.49668 12.5754 7.49668H15.4973V15.75C15.4973 16.4404 14.9379 17 14.2479 17H5.74532C5.0553 17 4.49593 16.4404 4.49593 15.75L4.49586 4.25001ZM14.4343 5.99668L12.4921 4.05783V5.91334C12.4921 5.93545 12.5009 5.95664 12.5165 5.97227C12.5321 5.9879 12.5533 5.99668 12.5754 5.99668H14.4343Z" />
6
4
  </svg>
7
-
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12.75C2 13.9926 3.00736 15 4.25 15H15.75C16.9926 15 18 13.9926 18 12.75V7.25C18 6.0074 16.9926 5 15.75 5H4.25C3.00736 5 2 6.0074 2 7.25V12.75ZM3.5 12.75C3.5 13.1642 3.83579 13.5 4.25 13.5H15.75C16.1642 13.5 16.5 13.1642 16.5 12.75V7.25C16.5 6.8358 16.1642 6.5 15.75 6.5H4.25C3.83579 6.5 3.5 6.8358 3.5 7.25V12.75ZM10.25 9.25C9.83579 9.25 9.5 9.58579 9.5 10C9.5 10.4142 9.83579 10.75 10.25 10.75H13.75C14.1642 10.75 14.5 10.4142 14.5 10C14.5 9.58579 14.1642 9.25 13.75 9.25H10.25ZM6 8.5C5.44772 8.5 5 8.94771 5 9.5V10.5C5 11.0523 5.44772 11.5 6 11.5H7C7.55228 11.5 8 11.0523 8 10.5V9.5C8 8.94772 7.55228 8.5 7 8.5H6Z" />
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M6.75046 7.25C7.05549 7.25019 7.33096 7.43515 7.44578 7.71777L10.6958 15.7178C10.8514 16.1013 10.6661 16.5393 10.2827 16.6953C9.89904 16.851 9.46108 16.6658 9.30515 16.2822L8.68308 14.75H4.31785L3.69578 16.2822C3.53996 16.6658 3.10185 16.8508 2.71824 16.6953C2.33455 16.5394 2.1494 16.1015 2.30515 15.7178L5.55515 7.71777C5.67006 7.4351 5.94531 7.25 6.25046 7.25H6.75046ZM4.92722 13.25H8.07371L6.50046 9.37793L4.92722 13.25Z" />
3
+ <path d="M12.1401 2.2002C12.5346 2.20031 12.8423 2.51397 12.8423 2.91309C12.8423 3.12364 12.7451 3.30551 12.6177 3.4209L11.6704 4.35059L11.5532 4.44434L11.8686 4.43359H14.3579C15.3076 4.43359 16.1443 4.73128 16.7456 5.28516C17.3487 5.84076 17.6996 6.64028 17.6997 7.61133C17.6997 8.57822 17.3463 9.38055 16.7427 9.93945C16.1408 10.4969 15.3038 10.7998 14.3579 10.7998H13.2436C13.0535 10.7997 12.8677 10.7476 12.7261 10.626C12.5804 10.5009 12.5025 10.3197 12.5024 10.1074C12.5024 9.8956 12.5796 9.71381 12.7192 9.58691C12.8564 9.46221 13.0379 9.4043 13.2241 9.4043H14.3579C14.9329 9.4043 15.4106 9.22123 15.7427 8.90723C16.0732 8.59459 16.2758 8.13679 16.2759 7.55176C16.2759 6.99074 16.0721 6.56373 15.7417 6.27539C15.4079 5.98422 14.9278 5.81934 14.3579 5.81934H11.8628L11.5698 5.80957L12.6284 6.83203C12.7765 6.96762 12.8422 7.16542 12.8423 7.33984C12.8423 7.73634 12.5371 8.05273 12.1499 8.05273C11.9478 8.05273 11.776 7.9829 11.6372 7.84375L11.6352 7.8418L9.54832 5.69922C9.39856 5.54868 9.30038 5.35992 9.30027 5.12695C9.30027 4.89706 9.39542 4.69649 9.54832 4.54297L11.6333 2.42383C11.7702 2.27437 11.9334 2.2002 12.1401 2.2002Z" />
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg iewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M14.166 5.63857C14.5801 5.63857 14.9158 5.9745 14.916 6.38857V9.72157C14.916 10.1358 14.5802 10.4716 14.166 10.4716H5.83301C5.41894 10.4714 5.08301 10.1357 5.08301 9.72157V6.38857C5.08318 5.97461 5.41905 5.63874 5.83301 5.63857H14.166Z" />
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15.2773 2.30556C16.9189 2.30556 18.25 3.6367 18.25 5.27821V14.7225C18.2498 16.3639 16.9187 17.6942 15.2773 17.6942H4.72266C3.13235 17.6942 1.83337 16.4455 1.75391 14.8749L1.75 14.7225V5.27821C1.75 3.6367 3.08114 2.30556 4.72266 2.30556H15.2773ZM4.72266 3.80556C3.90957 3.80556 3.25 4.46513 3.25 5.27821V14.7225L3.25781 14.8729C3.3333 15.6152 3.96046 16.1942 4.72266 16.1942H15.2773C16.0903 16.1942 16.7498 15.5355 16.75 14.7225V5.27821C16.75 4.46513 16.0904 3.80556 15.2773 3.80556H4.72266Z" />
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ d="M7.5 11C8.3284 11 9 11.6716 9 12.5V14.5C9 15.3284 8.3284 16 7.5 16H5.5C4.67157 16 4 15.3285 4 14.5V12.5C4 11.6716 4.67157 11 5.5 11H7.5ZM14.5 11C15.3284 11 16 11.6716 16 12.5V14.5C16 15.3284 15.3284 16 14.5 16H12.5C11.6716 16 11 15.3285 11 14.5V12.5C11 11.6716 11.6716 11 12.5 11H14.5ZM7.5 4C8.3284 4 9 4.67157 9 5.5V7.5C9 8.3284 8.3284 9 7.5 9H5.5C4.67157 9 4 8.3285 4 7.5V5.5C4 4.67157 4.67157 4 5.5 4H7.5ZM14.5 4C15.3284 4 16 4.67157 16 5.5V7.5C16 8.3284 15.3284 9 14.5 9H12.5C11.6716 9 11 8.3285 11 7.5V5.5C11 4.67157 11.6716 4 12.5 4H14.5Z" />
4
+ </svg>
@@ -0,0 +1,11 @@
1
+ import React, {PropsWithChildren, useContext} from "react";
2
+ import {ImagesGalleryProvider, ImagesGalleryStateContext} from "./images-gallery";
3
+
4
+ export function ImagesGalleryFallThroughProvider(props: PropsWithChildren) {
5
+ const context = useContext(ImagesGalleryStateContext);
6
+ if (context === undefined) {
7
+ return <ImagesGalleryProvider>{props.children}</ImagesGalleryProvider>;
8
+ }
9
+
10
+ return <>{props.children}</>;
11
+ }
@@ -10,14 +10,14 @@ import ArrowLeft from "../icons/react/ArrowLeft";
10
10
  import {css} from "@linaria/core";
11
11
  import cx from "classnames";
12
12
 
13
- type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void}>;
13
+ type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void; src: string}>;
14
14
 
15
15
  const [ImagesGalleryRegistryProvider, useImagesGalleryRegistry] = createContext(
16
16
  "ImagesGalleryRegistryContext",
17
17
  new Map()
18
18
  );
19
19
 
20
- export {useImagesGalleryRegistry};
20
+ export {ImagesGalleryRegistryProvider, useImagesGalleryRegistry};
21
21
 
22
22
  type Methods = {
23
23
  setVisible: (visible: boolean) => void;
@@ -33,20 +33,23 @@ const [ImagesGalleryMethodsProvider, useImagesGalleryMethods] = createContext<Me
33
33
  nextImage: _.noop,
34
34
  prevImage: _.noop,
35
35
  });
36
- type State = {visible: boolean; activated: boolean; _inc: number};
36
+ type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
37
37
 
38
- const [ImagesGalleryStateProvider, useImagesGalleryState] = createContext<State>("ImagesGalleryStateContext", {
39
- visible: false,
40
- activated: false,
41
- _inc: 0,
42
- });
38
+ const [ImagesGalleryStateProvider, useImagesGalleryState, ImagesGalleryStateContext] =
39
+ createContext<State>("ImagesGalleryStateContext");
43
40
 
44
- export {useImagesGalleryMethods, useImagesGalleryState};
41
+ export {
42
+ ImagesGalleryMethodsProvider,
43
+ useImagesGalleryMethods,
44
+ ImagesGalleryStateProvider,
45
+ useImagesGalleryState,
46
+ ImagesGalleryStateContext,
47
+ };
45
48
 
46
49
  type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
47
50
 
48
51
  function initialState(): State {
49
- return {visible: false, activated: false, _inc: 0};
52
+ return {version: "1", visible: false, activated: false, _inc: 0};
50
53
  }
51
54
 
52
55
  function imagesGalleryReducer(state: State, action: Actions) {
@@ -5,8 +5,9 @@ import "react-medium-image-zoom/dist/styles.css";
5
5
  import {themeVars} from "../design-system";
6
6
  import {IconButton} from "../button/icon-button";
7
7
  import Close from "../icons/react/Close";
8
- import {Controls, useImagesGalleryMethods} from "./images-gallery";
8
+ import {Controls, useImagesGalleryMethods, useImagesGalleryState} from "./images-gallery";
9
9
  import {useIsPhone} from "../use-is-phone";
10
+ import {ZoomV2} from "../images-gallery-2/zoom";
10
11
 
11
12
  const dialogCss = css`
12
13
  :global() {
@@ -79,7 +80,7 @@ type Props = {
79
80
  zoomImg?: {src: string; alt?: string};
80
81
  };
81
82
 
82
- export const Zoom = (props: Props) => {
83
+ export const ZoomV1 = (props: Props) => {
83
84
  const {zoomed, onZoomedChange, children, className, openOnClick, zoomImg} = props;
84
85
  const imagesGalleryMethods = useImagesGalleryMethods();
85
86
  const onClick = useCallback(() => {
@@ -110,3 +111,13 @@ export const Zoom = (props: Props) => {
110
111
  </div>
111
112
  );
112
113
  };
114
+
115
+ export const Zoom = (props: Props) => {
116
+ const {version} = useImagesGalleryState();
117
+
118
+ if (version === "1") {
119
+ return <ZoomV1 {...props} />;
120
+ }
121
+
122
+ return <ZoomV2 {...props} />;
123
+ };