@unoff/ui 1.21.0 → 1.21.2
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.
- package/dist/assets/Card.css +1 -1
- package/dist/assets/FormItem.css +1 -1
- package/dist/assets/Layout.css +1 -1
- package/dist/assets/MultipleSlider.css +1 -1
- package/dist/assets/Popin.css +1 -1
- package/dist/assets/SimpleSlider.css +1 -1
- package/dist/assets/styles/icons/icons.css +1 -1
- package/dist/assets/styles/icons/styles/figma.css +1 -1
- package/dist/assets/styles/icons/styles/framer.css +1 -1
- package/dist/assets/styles/icons/styles/penpot.css +1 -1
- package/dist/assets/styles/icons/styles/sketch.css +1 -1
- package/dist/components/actions/accordion/Accordion.d.ts +0 -1
- package/dist/components/actions/accordion/Accordion.d.ts.map +1 -1
- package/dist/components/actions/accordion/Accordion.js +6 -6
- package/dist/components/actions/accordion/Accordion.js.map +1 -1
- package/dist/components/actions/button/Button.d.ts +2 -3
- package/dist/components/actions/button/Button.d.ts.map +1 -1
- package/dist/components/actions/button/Button.figma.js +1 -1
- package/dist/components/actions/button/Button.js +87 -88
- package/dist/components/actions/button/Button.js.map +1 -1
- package/dist/components/actions/card/Card.d.ts +0 -1
- package/dist/components/actions/card/Card.d.ts.map +1 -1
- package/dist/components/actions/card/Card.js +1 -1
- package/dist/components/actions/card/Card.js.map +1 -1
- package/dist/components/actions/knob/Knob.d.ts +2 -3
- package/dist/components/actions/knob/Knob.d.ts.map +1 -1
- package/dist/components/actions/knob/Knob.js +1 -1
- package/dist/components/actions/knob/Knob.js.map +1 -1
- package/dist/components/actions/menu/Menu.d.ts +2 -3
- package/dist/components/actions/menu/Menu.d.ts.map +1 -1
- package/dist/components/actions/menu/Menu.js +4 -4
- package/dist/components/actions/menu/Menu.js.map +1 -1
- package/dist/components/assets/avatar/Avatar.d.ts +0 -1
- package/dist/components/assets/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/assets/avatar/Avatar.js +6 -6
- package/dist/components/assets/avatar/Avatar.js.map +1 -1
- package/dist/components/assets/icon/Icon.d.ts +0 -1
- package/dist/components/assets/icon/Icon.d.ts.map +1 -1
- package/dist/components/assets/icon/Icon.figma.js +1 -1
- package/dist/components/assets/icon/Icon.js +6 -6
- package/dist/components/assets/icon/Icon.js.map +1 -1
- package/dist/components/assets/section-title/SectionTitle.d.ts +0 -1
- package/dist/components/assets/section-title/SectionTitle.d.ts.map +1 -1
- package/dist/components/assets/section-title/SectionTitle.js +1 -1
- package/dist/components/assets/section-title/SectionTitle.js.map +1 -1
- package/dist/components/assets/text/Text.d.ts +0 -1
- package/dist/components/assets/text/Text.d.ts.map +1 -1
- package/dist/components/assets/text/Text.js +1 -1
- package/dist/components/assets/text/Text.js.map +1 -1
- package/dist/components/assets/thumbnail/Thumbnail.d.ts +0 -1
- package/dist/components/assets/thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/components/dialogs/consent/Consent.d.ts +2 -3
- package/dist/components/dialogs/consent/Consent.d.ts.map +1 -1
- package/dist/components/dialogs/consent/Consent.js +1 -1
- package/dist/components/dialogs/consent/Consent.js.map +1 -1
- package/dist/components/dialogs/dialog/Dialog.d.ts +0 -1
- package/dist/components/dialogs/dialog/Dialog.d.ts.map +1 -1
- package/dist/components/dialogs/dialog/Dialog.js +4 -4
- package/dist/components/dialogs/dialog/Dialog.js.map +1 -1
- package/dist/components/dialogs/message/Message.d.ts +0 -1
- package/dist/components/dialogs/message/Message.js +1 -1
- package/dist/components/dialogs/message/Message.js.map +1 -1
- package/dist/components/dialogs/notification/Notification.d.ts +0 -1
- package/dist/components/dialogs/notification/Notification.d.ts.map +1 -1
- package/dist/components/dialogs/notification/Notification.js +4 -4
- package/dist/components/dialogs/notification/Notification.js.map +1 -1
- package/dist/components/dialogs/semantic-message/SemanticMessage.d.ts +2 -3
- package/dist/components/dialogs/semantic-message/SemanticMessage.d.ts.map +1 -1
- package/dist/components/dialogs/semantic-message/SemanticMessage.js +1 -1
- package/dist/components/dialogs/semantic-message/SemanticMessage.js.map +1 -1
- package/dist/components/inputs/dropdown/Dropdown.d.ts +2 -3
- package/dist/components/inputs/dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/Dropdown.figma.js +1 -1
- package/dist/components/inputs/dropdown/Dropdown.js +1 -1
- package/dist/components/inputs/dropdown/Dropdown.js.map +1 -1
- package/dist/components/inputs/dropzone/Dropzone.d.ts +2 -3
- package/dist/components/inputs/dropzone/Dropzone.d.ts.map +1 -1
- package/dist/components/inputs/dropzone/Dropzone.js +4 -4
- package/dist/components/inputs/dropzone/Dropzone.js.map +1 -1
- package/dist/components/inputs/input/Input.d.ts +2 -3
- package/dist/components/inputs/input/Input.d.ts.map +1 -1
- package/dist/components/inputs/input/Input.figma.js +1 -1
- package/dist/components/inputs/input/Input.js +1 -1
- package/dist/components/inputs/input/Input.js.map +1 -1
- package/dist/components/inputs/inputs-bar/InputsBar.d.ts +0 -1
- package/dist/components/inputs/inputs-bar/InputsBar.d.ts.map +1 -1
- package/dist/components/inputs/inputs-bar/InputsBar.js +4 -4
- package/dist/components/inputs/inputs-bar/InputsBar.js.map +1 -1
- package/dist/components/inputs/multiple-slider/MultipleSlider.d.ts +19 -12
- package/dist/components/inputs/multiple-slider/MultipleSlider.d.ts.map +1 -1
- package/dist/components/inputs/multiple-slider/MultipleSlider.js +283 -235
- package/dist/components/inputs/multiple-slider/MultipleSlider.js.map +1 -1
- package/dist/components/inputs/multiple-slider/actions/addStop.d.ts.map +1 -1
- package/dist/components/inputs/multiple-slider/actions/deleteStop.d.ts.map +1 -1
- package/dist/components/inputs/multiple-slider/actions/shiftLeftStop.d.ts +1 -1
- package/dist/components/inputs/multiple-slider/actions/shiftLeftStop.d.ts.map +1 -1
- package/dist/components/inputs/multiple-slider/actions/shiftRightStop.d.ts +1 -1
- package/dist/components/inputs/multiple-slider/actions/shiftRightStop.d.ts.map +1 -1
- package/dist/components/inputs/select/Select.d.ts +3 -4
- package/dist/components/inputs/select/Select.d.ts.map +1 -1
- package/dist/components/inputs/select/Select.js +1 -1
- package/dist/components/inputs/select/Select.js.map +1 -1
- package/dist/components/inputs/simple-slider/SimpleSlider.d.ts +15 -5
- package/dist/components/inputs/simple-slider/SimpleSlider.d.ts.map +1 -1
- package/dist/components/inputs/simple-slider/SimpleSlider.js +116 -87
- package/dist/components/inputs/simple-slider/SimpleSlider.js.map +1 -1
- package/dist/components/lists/actions-item/ActionsItem.d.ts +0 -1
- package/dist/components/lists/actions-item/ActionsItem.js +1 -1
- package/dist/components/lists/actions-item/ActionsItem.js.map +1 -1
- package/dist/components/lists/actions-list/ActionsList.d.ts +4 -5
- package/dist/components/lists/actions-list/ActionsList.d.ts.map +1 -1
- package/dist/components/lists/actions-list/ActionsList.js +1 -1
- package/dist/components/lists/actions-list/ActionsList.js.map +1 -1
- package/dist/components/lists/color-item/ColorItem.d.ts +0 -1
- package/dist/components/lists/color-item/ColorItem.d.ts.map +1 -1
- package/dist/components/lists/color-item/ColorItem.js +1 -1
- package/dist/components/lists/color-item/ColorItem.js.map +1 -1
- package/dist/components/lists/draggable-item/DraggableItem.d.ts +2 -3
- package/dist/components/lists/draggable-item/DraggableItem.d.ts.map +1 -1
- package/dist/components/lists/draggable-item/DraggableItem.js +6 -6
- package/dist/components/lists/draggable-item/DraggableItem.js.map +1 -1
- package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.d.ts +0 -1
- package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.d.ts.map +1 -1
- package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js +1 -1
- package/dist/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.js.map +1 -1
- package/dist/components/lists/members-list/MembersList.d.ts +0 -1
- package/dist/components/lists/sortable-list/SortableList.d.ts +2 -3
- package/dist/components/lists/sortable-list/SortableList.d.ts.map +1 -1
- package/dist/components/lists/sortable-list/SortableList.js.map +1 -1
- package/dist/components/lists/tabs/Tabs.d.ts +0 -1
- package/dist/components/lists/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/lists/tabs/Tabs.figma.js +1 -1
- package/dist/components/lists/tabs/Tabs.js +1 -1
- package/dist/components/lists/tabs/Tabs.js.map +1 -1
- package/dist/components/slots/bar/Bar.d.ts +1 -2
- package/dist/components/slots/bar/Bar.d.ts.map +1 -1
- package/dist/components/slots/bar/Bar.js.map +1 -1
- package/dist/components/slots/draggable-window/DraggableWindow.d.ts +0 -1
- package/dist/components/slots/draggable-window/DraggableWindow.d.ts.map +1 -1
- package/dist/components/slots/draggable-window/DraggableWindow.js +6 -6
- package/dist/components/slots/draggable-window/DraggableWindow.js.map +1 -1
- package/dist/components/slots/drawer/Drawer.d.ts +1 -2
- package/dist/components/slots/drawer/Drawer.d.ts.map +1 -1
- package/dist/components/slots/drawer/Drawer.js.map +1 -1
- package/dist/components/slots/form-item/FormItem.d.ts +0 -1
- package/dist/components/slots/form-item/FormItem.d.ts.map +1 -1
- package/dist/components/slots/form-item/FormItem.js +1 -1
- package/dist/components/slots/form-item/FormItem.js.map +1 -1
- package/dist/components/slots/layout/Layout.d.ts +0 -1
- package/dist/components/slots/layout/Layout.d.ts.map +1 -1
- package/dist/components/slots/layout/Layout.js.map +1 -1
- package/dist/components/slots/list/List.d.ts +0 -1
- package/dist/components/slots/list/List.d.ts.map +1 -1
- package/dist/components/slots/list/List.js +4 -4
- package/dist/components/slots/list/List.js.map +1 -1
- package/dist/components/slots/popin/Popin.d.ts +0 -1
- package/dist/components/slots/popin/Popin.d.ts.map +1 -1
- package/dist/components/slots/popin/Popin.js +1 -1
- package/dist/components/slots/popin/Popin.js.map +1 -1
- package/dist/components/slots/section/Section.d.ts +1 -2
- package/dist/components/slots/section/Section.d.ts.map +1 -1
- package/dist/components/slots/section/Section.js.map +1 -1
- package/dist/components/slots/simple-item/SimpleItem.d.ts +0 -1
- package/dist/components/slots/simple-item/SimpleItem.js.map +1 -1
- package/dist/components/tags/chip/Chip.d.ts +0 -1
- package/dist/components/tags/chip/Chip.d.ts.map +1 -1
- package/dist/components/tags/chip/Chip.figma.js +1 -1
- package/dist/components/tags/chip/Chip.js +6 -6
- package/dist/components/tags/chip/Chip.js.map +1 -1
- package/dist/components/tags/color-chip/ColorChip.d.ts +2 -3
- package/dist/components/tags/color-chip/ColorChip.d.ts.map +1 -1
- package/dist/components/tags/color-chip/ColorChip.js.map +1 -1
- package/dist/components/tags/icon-chip/IconChip.d.ts +2 -3
- package/dist/components/tags/icon-chip/IconChip.d.ts.map +1 -1
- package/dist/components/tags/icon-chip/IconChip.js +4 -4
- package/dist/components/tags/icon-chip/IconChip.js.map +1 -1
- package/dist/components/tags/tooltip/Tooltip.d.ts +0 -1
- package/dist/components/tags/tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/tags/tooltip/Tooltip.js +1 -1
- package/dist/components/tags/tooltip/Tooltip.js.map +1 -1
- package/dist/do-classnames-DSDFCvzy.js.map +1 -1
- package/dist/do-map-2nhWP1KI.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index_react-BkjUklDQ.js +18392 -0
- package/dist/index_react-BkjUklDQ.js.map +1 -0
- package/dist/styles/icons/icons.module.js +114 -110
- package/dist/styles/icons/icons.module.js.map +1 -1
- package/dist/tests/setup.d.ts +0 -1
- package/dist/types/consent.types.d.ts +0 -1
- package/dist/types/consent.types.d.ts.map +1 -1
- package/dist/types/icon.types.d.ts +2 -1
- package/dist/types/icon.types.d.ts.map +1 -1
- package/dist/types/icon.types.js +114 -1
- package/dist/types/icon.types.js.map +1 -1
- package/dist/types/list.types.d.ts +0 -1
- package/package.json +15 -12
- package/dist/index_react-CmuCVQet.js +0 -13799
- package/dist/index_react-CmuCVQet.js.map +0 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import '../../../assets/ColorItem.css';
|
|
2
2
|
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
+
import { t as m } from "../../../do-classnames-DSDFCvzy.js";
|
|
4
5
|
import o from "../../../styles/texts/texts.module.js";
|
|
5
6
|
import f from "../../tags/color-chip/ColorChip.js";
|
|
6
7
|
import u from "../../actions/button/Button.js";
|
|
7
|
-
import { t as m } from "../../../do-classnames-DSDFCvzy.js";
|
|
8
8
|
const N = (a) => {
|
|
9
9
|
const { name: l, hex: t, id: n, canBeRemoved: r = !1, onRemoveColor: c } = a, [d, i] = p(!1);
|
|
10
10
|
return /* @__PURE__ */ s(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorItem.js","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"sourcesContent":["import { useState } from 'react'\nimport texts from '@styles/texts/texts.module.scss'\nimport ColorChip from '@components/tags/color-chip/ColorChip'\nimport Button from '@components/actions/button/Button'\nimport
|
|
1
|
+
{"version":3,"file":"ColorItem.js","sources":["../../../../src/components/lists/color-item/ColorItem.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport ColorChip from '@components/tags/color-chip/ColorChip'\nimport Button from '@components/actions/button/Button'\nimport './color-item.scss'\n\nexport type ColorItemProps = {\n /**\n * Unique identifier for the color item\n */\n id?: string\n /**\n * Name of the color\n */\n name: string\n /**\n * Hex color value\n */\n hex: string\n /**\n * Whether the item can be removed\n * @default false\n */\n canBeRemoved?: boolean\n /**\n * Remove button handler\n */\n onRemoveColor?: React.ReactEventHandler\n}\n\nconst ColorItem = (props: ColorItemProps) => {\n const { name, hex, id, canBeRemoved = false, onRemoveColor } = props\n const [isRemovePermitted, setIsRemovePermitted] = useState(false)\n\n return (\n <li\n className=\"color-item\"\n data-id={id}\n onMouseEnter={() => {\n if (canBeRemoved) setIsRemovePermitted(true)\n }}\n onMouseLeave={() => {\n if (canBeRemoved) setIsRemovePermitted(false)\n }}\n >\n <div\n className=\"color-item__left\"\n role=\"group\"\n >\n <div\n className=\"color-item__info\"\n role=\"presentation\"\n >\n <ColorChip\n color={hex}\n isRounded\n />\n <div className={doClassnames([texts.type, texts['type--truncated']])}>\n {name}\n </div>\n <div className={doClassnames([texts.type, texts['type--secondary']])}>\n {hex.toUpperCase()}\n </div>\n </div>\n </div>\n {isRemovePermitted && (\n <div\n className=\"color-item__right\"\n role=\"group\"\n >\n <Button\n type=\"icon\"\n icon=\"minus\"\n feature=\"REMOVE_COLOR\"\n action={onRemoveColor}\n />\n </div>\n )}\n </li>\n )\n}\n\nexport default ColorItem\n"],"names":["ColorItem","props","name","hex","id","canBeRemoved","onRemoveColor","isRemovePermitted","setIsRemovePermitted","useState","jsxs","jsx","ColorChip","doClassnames","texts","Button"],"mappings":";;;;;;AA+BA,MAAMA,IAAY,CAACC,MAA0B;AAC3C,QAAM,EAAE,MAAAC,GAAM,KAAAC,GAAK,IAAAC,GAAI,cAAAC,IAAe,IAAO,eAAAC,MAAkBL,GACzD,CAACM,GAAmBC,CAAoB,IAAIC,EAAS,EAAK;AAEhE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,WAASN;AAAA,MACT,cAAc,MAAM;AAClB,QAAIC,OAAmC,EAAI;AAAA,MAC7C;AAAA,MACA,cAAc,MAAM;AAClB,QAAIA,OAAmC,EAAK;AAAA,MAC9C;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAM;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBAEL,UAAA;AAAA,kBAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,OAAOT;AAAA,sBACP,WAAS;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEX,gBAAAQ,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAZ,EAAA,CACH;AAAA,kBACA,gBAAAS,EAAC,OAAA,EAAI,WAAWE,EAAa,CAACC,EAAM,MAAMA,EAAM,iBAAiB,CAAC,CAAC,GAChE,UAAAX,EAAI,cAAY,CACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEDI,KACC,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEL,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,SAAQ;AAAA,gBACR,QAAQT;AAAA,cAAA;AAAA,YAAA;AAAA,UACV;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
|
|
3
2
|
export interface DraggableItemProps {
|
|
4
3
|
/**
|
|
5
4
|
* Unique identifier for the item
|
|
@@ -93,11 +92,11 @@ export interface DraggableItemProps {
|
|
|
93
92
|
*/
|
|
94
93
|
onRemove: React.MouseEventHandler<Element> & React.KeyboardEventHandler<Element>;
|
|
95
94
|
}
|
|
96
|
-
export interface
|
|
95
|
+
export interface DraggableItemState {
|
|
97
96
|
isDragged: boolean;
|
|
98
97
|
hasMoreOptions: boolean;
|
|
99
98
|
}
|
|
100
|
-
export default class DraggableItem extends React.Component<DraggableItemProps,
|
|
99
|
+
export default class DraggableItem extends React.Component<DraggableItemProps, DraggableItemState> {
|
|
101
100
|
private moreButtonRef;
|
|
102
101
|
static defaultProps: Partial<DraggableItemProps>;
|
|
103
102
|
constructor(props: DraggableItemProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,sCAAsC;QACtC,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;KACtB,CAAA;IACD;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,+BAA+B;QAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACzD;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACH,YAAY,EAAE,CACZ,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;IACT;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACxC,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"DraggableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE;QACd,sCAAsC;QACtC,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;KACtB,CAAA;IACD;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,+BAA+B;QAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAA;IACzD;;OAEG;IACH,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACjD,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC3C;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B;;OAEG;IACH,YAAY,EAAE,CACZ,EAAE,EAAE,MAAM,GAAG,SAAS,EACtB,aAAa,EAAE,OAAO,EACtB,aAAa,EAAE,OAAO,EACtB,QAAQ,EAAE,MAAM,KACb,IAAI,CAAA;IACT;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IAC1D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GACxC,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,KAAK,CAAC,SAAS,CACxD,kBAAkB,EAClB,kBAAkB,CACnB;IACC,OAAO,CAAC,aAAa,CAAyB;IAE9C,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAM/C;gBAEW,KAAK,EAAE,kBAAkB;IAUrC,WAAW,GAAI,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,UAa/C;IAED,SAAS,GAAI,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,UAO7C;IAED,UAAU,GAAI,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,UAwB9C;IAED,MAAM,GAAI,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,UAK1C;IAGD,MAAM;CA0HP"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import '../../../assets/DraggableItem.css';
|
|
2
2
|
import { jsxs as p, jsx as g } from "react/jsx-runtime";
|
|
3
3
|
import m from "react";
|
|
4
|
-
import S from "
|
|
4
|
+
import { r as S } from "../../../do-map-2nhWP1KI.js";
|
|
5
|
+
import { t as y } from "../../../do-classnames-DSDFCvzy.js";
|
|
6
|
+
import B from "../../slots/draggable-window/DraggableWindow.js";
|
|
5
7
|
import h from "../../actions/button/Button.js";
|
|
6
|
-
import { r as y } from "../../../do-map-2nhWP1KI.js";
|
|
7
|
-
import { t as B } from "../../../do-classnames-DSDFCvzy.js";
|
|
8
8
|
class A extends m.Component {
|
|
9
9
|
moreButtonRef;
|
|
10
10
|
static defaultProps = {
|
|
@@ -32,7 +32,7 @@ class A extends m.Component {
|
|
|
32
32
|
onDragOver = (e) => {
|
|
33
33
|
const { onDragChange: t } = this.props;
|
|
34
34
|
e.preventDefault();
|
|
35
|
-
const o = e.currentTarget, c = o.getBoundingClientRect(), a = o.clientHeight, l = e.clientY - c.top, i =
|
|
35
|
+
const o = e.currentTarget, c = o.getBoundingClientRect(), a = o.clientHeight, l = e.clientY - c.top, i = S(l, 0, a, 0, a);
|
|
36
36
|
i >= -1 && i <= a / 2 ? t(
|
|
37
37
|
o.dataset.id,
|
|
38
38
|
!0,
|
|
@@ -74,7 +74,7 @@ class A extends m.Component {
|
|
|
74
74
|
{
|
|
75
75
|
"data-id": e,
|
|
76
76
|
"data-position": t,
|
|
77
|
-
className:
|
|
77
|
+
className: y([
|
|
78
78
|
"draggable-item",
|
|
79
79
|
f && "draggable-item--dragged",
|
|
80
80
|
v && "draggable-item--above",
|
|
@@ -155,7 +155,7 @@ class A extends m.Component {
|
|
|
155
155
|
}
|
|
156
156
|
),
|
|
157
157
|
r && a !== void 0 && /* @__PURE__ */ g(
|
|
158
|
-
|
|
158
|
+
B,
|
|
159
159
|
{
|
|
160
160
|
title: a.title !== void 0 ? a.title : u,
|
|
161
161
|
onClose: () => this.setState({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableItem.js","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"sourcesContent":["import React from 'react'\nimport DraggableWindow from '@components/slots/draggable-window/DraggableWindow'\nimport Button from '@components/actions/button/Button'\nimport { doClassnames, doMap } from '@a_ng_d/figmug-utils'\nimport './draggable-item.scss'\n\nexport interface DraggableItemProps {\n /**\n * Unique identifier for the item\n */\n id: string\n /**\n * Index position in the list\n */\n index: number\n /**\n * Whether the item can be removed\n * @default true\n */\n canBeRemoved?: boolean\n /**\n * Primary content slot\n */\n primarySlot: React.ReactNode\n /**\n * Secondary content configuration\n */\n secondarySlot?: {\n /** Title for the secondary content */\n title: string\n /** Content node */\n node: React.ReactNode\n }\n /**\n * Action buttons slot\n */\n actionsSlot?: React.ReactNode\n /**\n * Whether the item is selected\n * @default false\n */\n selected?: boolean\n /**\n * Title for the options panel\n */\n optionsTitle?: string\n /**\n * Helper texts for buttons\n */\n helpers?: {\n /** Helper for remove button */\n remove?: string\n /** Helper for more options button */\n more?: string\n }\n /**\n * Whether to show drop guide above\n * @default false\n */\n guideAbove?: boolean\n /**\n * Whether to show drop guide below\n * @default false\n */\n guideBelow?: boolean\n /**\n * Whether the item is blocked\n * @default false\n */\n isBlocked?: boolean\n /**\n * Selection change handler\n */\n onChangeSelection: React.MouseEventHandler<HTMLLIElement>\n /**\n * Cancel selection handler\n */\n onCancelSelection: React.MouseEventHandler<Element> &\n React.FocusEventHandler<HTMLInputElement>\n /**\n * Refold options handler\n */\n onRefoldOptions?: () => void\n /**\n * Drag state change handler\n */\n onDragChange: (\n id: string | undefined,\n hasGuideAbove: boolean,\n hasGuideBelow: boolean,\n position: number\n ) => void\n /**\n * Drop outside handler\n */\n onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void\n /**\n * Order change handler\n */\n onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void\n /**\n * Remove item handler\n */\n onRemove: React.MouseEventHandler<Element> &\n React.KeyboardEventHandler<Element>\n}\n\nexport interface DraggableItemStates {\n isDragged: boolean\n hasMoreOptions: boolean\n}\n\nexport default class DraggableItem extends React.Component<\n DraggableItemProps,\n DraggableItemStates\n> {\n private moreButtonRef: React.RefObject<Button>\n\n static defaultProps: Partial<DraggableItemProps> = {\n canBeRemoved: true,\n selected: false,\n guideAbove: false,\n guideBelow: false,\n isBlocked: false,\n }\n\n constructor(props: DraggableItemProps) {\n super(props)\n this.state = {\n isDragged: false,\n hasMoreOptions: false,\n }\n this.moreButtonRef = React.createRef()\n }\n\n // Direct Actions\n onDragStart = (e: React.DragEvent<HTMLLIElement>) => {\n const clone = e.currentTarget.cloneNode(true)\n\n this.setState({ isDragged: true })\n ;(clone as HTMLElement).style.opacity = '0'\n ;(clone as HTMLElement).style.position = 'absolute'\n ;(clone as HTMLElement).id = 'ghost'\n ;(clone as HTMLElement).style.pointerEvents = 'none'\n document.body.appendChild(clone)\n if (e.dataTransfer) {\n e.dataTransfer.setDragImage(clone as Element, 0, 0)\n e.dataTransfer.effectAllowed = 'move'\n }\n }\n\n onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {\n const { onDropOutside, onDragChange } = this.props\n\n this.setState({ isDragged: false })\n onDragChange('', false, false, 0)\n onDropOutside(e)\n document.querySelector('#ghost')?.remove()\n }\n\n onDragOver = (e: React.DragEvent<HTMLLIElement>) => {\n const { onDragChange } = this.props\n\n e.preventDefault()\n const target = e.currentTarget\n const rect = target.getBoundingClientRect()\n const height: number = target.clientHeight\n const y: number = e.clientY - rect.top\n const refY: number = doMap(y, 0, height, 0, height)\n\n if (refY >= -1 && refY <= height / 2)\n onDragChange(\n target.dataset.id,\n true,\n false,\n parseFloat(target.dataset.position ?? '0')\n )\n else if (refY > height / 2 && refY <= height)\n onDragChange(\n target.dataset.id,\n false,\n true,\n parseFloat(target.dataset.position ?? '0')\n )\n }\n\n onDrop = (e: React.DragEvent<HTMLLIElement>) => {\n const { onChangeOrder } = this.props\n\n e.preventDefault()\n onChangeOrder(e)\n }\n\n // Render\n render() {\n const {\n id,\n index,\n canBeRemoved,\n primarySlot,\n secondarySlot,\n actionsSlot,\n selected,\n optionsTitle,\n helpers,\n guideAbove,\n guideBelow,\n isBlocked,\n onRemove,\n onChangeSelection,\n onCancelSelection,\n onRefoldOptions,\n } = this.props\n\n const { isDragged, hasMoreOptions } = this.state\n\n return (\n <li\n data-id={id}\n data-position={index}\n className={doClassnames([\n 'draggable-item',\n isDragged && 'draggable-item--dragged',\n guideAbove && 'draggable-item--above',\n guideBelow && 'draggable-item--below',\n ])}\n draggable={!hasMoreOptions && !isBlocked ? selected : false}\n aria-grabbed={isDragged}\n aria-current={selected ? 'true' : undefined}\n onMouseDown={(e) => {\n if (!hasMoreOptions && !isBlocked) onChangeSelection(e)\n }}\n onDragStart={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragStart(e)\n }}\n onDragEnd={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragEnd(e)\n }}\n onDragOver={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragOver(e)\n }}\n onDrop={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDrop(e)\n }}\n >\n <div\n className=\"draggable-item__primary\"\n role=\"group\"\n >\n <div\n className=\"draggable-item__left\"\n role=\"presentation\"\n >\n {primarySlot}\n </div>\n <div\n className=\"draggable-item__right\"\n role=\"group\"\n >\n {secondarySlot !== undefined && (\n <Button\n ref={this.moreButtonRef}\n type=\"icon\"\n icon=\"ellipses\"\n state={hasMoreOptions ? 'selected' : undefined}\n helper={\n helpers?.more !== undefined\n ? {\n label: helpers.more,\n }\n : undefined\n }\n action={() => {\n onCancelSelection\n onRefoldOptions\n this.setState({ hasMoreOptions: !hasMoreOptions })\n }}\n />\n )}\n {actionsSlot !== undefined && actionsSlot}\n <Button\n type=\"icon\"\n icon=\"minus\"\n helper={\n helpers?.remove !== undefined\n ? {\n label: helpers.remove,\n }\n : undefined\n }\n feature=\"REMOVE_ITEM\"\n isDisabled={!canBeRemoved}\n action={canBeRemoved ? onRemove : () => null}\n />\n </div>\n </div>\n {hasMoreOptions && secondarySlot !== undefined && (\n <DraggableWindow\n title={\n secondarySlot.title !== undefined\n ? secondarySlot.title\n : optionsTitle\n }\n onClose={() =>\n this.setState({\n hasMoreOptions: false,\n })\n }\n triggerRef={this.moreButtonRef}\n >\n {secondarySlot.node}\n </DraggableWindow>\n )}\n </li>\n )\n }\n}\n"],"names":["DraggableItem","React","props","clone","onDropOutside","onDragChange","target","rect","height","y","refY","doMap","onChangeOrder","id","index","canBeRemoved","primarySlot","secondarySlot","actionsSlot","selected","optionsTitle","helpers","guideAbove","guideBelow","isBlocked","onRemove","onChangeSelection","onCancelSelection","onRefoldOptions","isDragged","hasMoreOptions","jsxs","doClassnames","e","jsx","Button","DraggableWindow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DraggableItem.js","sources":["../../../../src/components/lists/draggable-item/DraggableItem.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames, doMap } from '@unoff/utils'\nimport DraggableWindow from '@components/slots/draggable-window/DraggableWindow'\nimport Button from '@components/actions/button/Button'\nimport './draggable-item.scss'\n\nexport interface DraggableItemProps {\n /**\n * Unique identifier for the item\n */\n id: string\n /**\n * Index position in the list\n */\n index: number\n /**\n * Whether the item can be removed\n * @default true\n */\n canBeRemoved?: boolean\n /**\n * Primary content slot\n */\n primarySlot: React.ReactNode\n /**\n * Secondary content configuration\n */\n secondarySlot?: {\n /** Title for the secondary content */\n title: string\n /** Content node */\n node: React.ReactNode\n }\n /**\n * Action buttons slot\n */\n actionsSlot?: React.ReactNode\n /**\n * Whether the item is selected\n * @default false\n */\n selected?: boolean\n /**\n * Title for the options panel\n */\n optionsTitle?: string\n /**\n * Helper texts for buttons\n */\n helpers?: {\n /** Helper for remove button */\n remove?: string\n /** Helper for more options button */\n more?: string\n }\n /**\n * Whether to show drop guide above\n * @default false\n */\n guideAbove?: boolean\n /**\n * Whether to show drop guide below\n * @default false\n */\n guideBelow?: boolean\n /**\n * Whether the item is blocked\n * @default false\n */\n isBlocked?: boolean\n /**\n * Selection change handler\n */\n onChangeSelection: React.MouseEventHandler<HTMLLIElement>\n /**\n * Cancel selection handler\n */\n onCancelSelection: React.MouseEventHandler<Element> &\n React.FocusEventHandler<HTMLInputElement>\n /**\n * Refold options handler\n */\n onRefoldOptions?: () => void\n /**\n * Drag state change handler\n */\n onDragChange: (\n id: string | undefined,\n hasGuideAbove: boolean,\n hasGuideBelow: boolean,\n position: number\n ) => void\n /**\n * Drop outside handler\n */\n onDropOutside: (e: React.DragEvent<HTMLLIElement>) => void\n /**\n * Order change handler\n */\n onChangeOrder: (e: React.DragEvent<HTMLLIElement>) => void\n /**\n * Remove item handler\n */\n onRemove: React.MouseEventHandler<Element> &\n React.KeyboardEventHandler<Element>\n}\n\nexport interface DraggableItemState {\n isDragged: boolean\n hasMoreOptions: boolean\n}\n\nexport default class DraggableItem extends React.Component<\n DraggableItemProps,\n DraggableItemState\n> {\n private moreButtonRef: React.RefObject<Button>\n\n static defaultProps: Partial<DraggableItemProps> = {\n canBeRemoved: true,\n selected: false,\n guideAbove: false,\n guideBelow: false,\n isBlocked: false,\n }\n\n constructor(props: DraggableItemProps) {\n super(props)\n this.state = {\n isDragged: false,\n hasMoreOptions: false,\n }\n this.moreButtonRef = React.createRef()\n }\n\n // Direct Actions\n onDragStart = (e: React.DragEvent<HTMLLIElement>) => {\n const clone = e.currentTarget.cloneNode(true)\n\n this.setState({ isDragged: true })\n ;(clone as HTMLElement).style.opacity = '0'\n ;(clone as HTMLElement).style.position = 'absolute'\n ;(clone as HTMLElement).id = 'ghost'\n ;(clone as HTMLElement).style.pointerEvents = 'none'\n document.body.appendChild(clone)\n if (e.dataTransfer) {\n e.dataTransfer.setDragImage(clone as Element, 0, 0)\n e.dataTransfer.effectAllowed = 'move'\n }\n }\n\n onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {\n const { onDropOutside, onDragChange } = this.props\n\n this.setState({ isDragged: false })\n onDragChange('', false, false, 0)\n onDropOutside(e)\n document.querySelector('#ghost')?.remove()\n }\n\n onDragOver = (e: React.DragEvent<HTMLLIElement>) => {\n const { onDragChange } = this.props\n\n e.preventDefault()\n const target = e.currentTarget\n const rect = target.getBoundingClientRect()\n const height: number = target.clientHeight\n const y: number = e.clientY - rect.top\n const refY: number = doMap(y, 0, height, 0, height)\n\n if (refY >= -1 && refY <= height / 2)\n onDragChange(\n target.dataset.id,\n true,\n false,\n parseFloat(target.dataset.position ?? '0')\n )\n else if (refY > height / 2 && refY <= height)\n onDragChange(\n target.dataset.id,\n false,\n true,\n parseFloat(target.dataset.position ?? '0')\n )\n }\n\n onDrop = (e: React.DragEvent<HTMLLIElement>) => {\n const { onChangeOrder } = this.props\n\n e.preventDefault()\n onChangeOrder(e)\n }\n\n // Render\n render() {\n const {\n id,\n index,\n canBeRemoved,\n primarySlot,\n secondarySlot,\n actionsSlot,\n selected,\n optionsTitle,\n helpers,\n guideAbove,\n guideBelow,\n isBlocked,\n onRemove,\n onChangeSelection,\n onCancelSelection,\n onRefoldOptions,\n } = this.props\n\n const { isDragged, hasMoreOptions } = this.state\n\n return (\n <li\n data-id={id}\n data-position={index}\n className={doClassnames([\n 'draggable-item',\n isDragged && 'draggable-item--dragged',\n guideAbove && 'draggable-item--above',\n guideBelow && 'draggable-item--below',\n ])}\n draggable={!hasMoreOptions && !isBlocked ? selected : false}\n aria-grabbed={isDragged}\n aria-current={selected ? 'true' : undefined}\n onMouseDown={(e) => {\n if (!hasMoreOptions && !isBlocked) onChangeSelection(e)\n }}\n onDragStart={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragStart(e)\n }}\n onDragEnd={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragEnd(e)\n }}\n onDragOver={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDragOver(e)\n }}\n onDrop={(e) => {\n if (!hasMoreOptions && !isBlocked) this.onDrop(e)\n }}\n >\n <div\n className=\"draggable-item__primary\"\n role=\"group\"\n >\n <div\n className=\"draggable-item__left\"\n role=\"presentation\"\n >\n {primarySlot}\n </div>\n <div\n className=\"draggable-item__right\"\n role=\"group\"\n >\n {secondarySlot !== undefined && (\n <Button\n ref={this.moreButtonRef}\n type=\"icon\"\n icon=\"ellipses\"\n state={hasMoreOptions ? 'selected' : undefined}\n helper={\n helpers?.more !== undefined\n ? {\n label: helpers.more,\n }\n : undefined\n }\n action={() => {\n onCancelSelection\n onRefoldOptions\n this.setState({ hasMoreOptions: !hasMoreOptions })\n }}\n />\n )}\n {actionsSlot !== undefined && actionsSlot}\n <Button\n type=\"icon\"\n icon=\"minus\"\n helper={\n helpers?.remove !== undefined\n ? {\n label: helpers.remove,\n }\n : undefined\n }\n feature=\"REMOVE_ITEM\"\n isDisabled={!canBeRemoved}\n action={canBeRemoved ? onRemove : () => null}\n />\n </div>\n </div>\n {hasMoreOptions && secondarySlot !== undefined && (\n <DraggableWindow\n title={\n secondarySlot.title !== undefined\n ? secondarySlot.title\n : optionsTitle\n }\n onClose={() =>\n this.setState({\n hasMoreOptions: false,\n })\n }\n triggerRef={this.moreButtonRef}\n >\n {secondarySlot.node}\n </DraggableWindow>\n )}\n </li>\n )\n }\n}\n"],"names":["DraggableItem","React","props","clone","onDropOutside","onDragChange","target","rect","height","y","refY","doMap","onChangeOrder","id","index","canBeRemoved","primarySlot","secondarySlot","actionsSlot","selected","optionsTitle","helpers","guideAbove","guideBelow","isBlocked","onRemove","onChangeSelection","onCancelSelection","onRefoldOptions","isDragged","hasMoreOptions","jsxs","doClassnames","e","jsx","Button","DraggableWindow"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardShortcutItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"names":[],"mappings":"AAEA,OAAO,+BAA+B,CAAA;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"KeyboardShortcutItem.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"names":[],"mappings":"AAEA,OAAO,+BAA+B,CAAA;AAEtC,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,oBAAoB,GAAI,OAAO,yBAAyB,4CA+D7D,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../../../assets/KeyboardShortcutItem.css';
|
|
2
2
|
import { jsxs as o, jsx as e, Fragment as l } from "react/jsx-runtime";
|
|
3
|
-
import r from "../../../styles/texts/texts.module.js";
|
|
4
3
|
import { t as i } from "../../../do-classnames-DSDFCvzy.js";
|
|
4
|
+
import r from "../../../styles/texts/texts.module.js";
|
|
5
5
|
const y = (n) => {
|
|
6
6
|
const { label: c, shortcuts: t = [], separator: m = "" } = n;
|
|
7
7
|
return /* @__PURE__ */ o("li", { className: "keyboard-shortcut-item", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardShortcutItem.js","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"KeyboardShortcutItem.js","sources":["../../../../src/components/lists/keyboard-shortcut-item/KeyboardShortcutItem.tsx"],"sourcesContent":["import { doClassnames } from '@unoff/utils'\nimport texts from '@styles/texts/texts.module.scss'\nimport './keyboard-shortcut-item.scss'\n\nexport type KeyboardShortcutItemProps = {\n /**\n * Label describing the action\n */\n label: string\n /**\n * Array of keyboard shortcut combinations\n */\n shortcuts: Array<Array<string>>\n /**\n * Separator between multiple shortcuts\n * @default ''\n */\n separator?: string\n}\n\nconst KeyboardShortcutItem = (props: KeyboardShortcutItemProps) => {\n const { label, shortcuts = [], separator = '' } = props\n\n return (\n <li className=\"keyboard-shortcut-item\">\n <div\n className=\"keyboard-shortcut-item__label\"\n role=\"presentation\"\n >\n <span\n className={texts.type}\n role=\"presentation\"\n >\n {label}\n </span>\n </div>\n <div\n className=\"keyboard-shortcut-item__keys\"\n role=\"group\"\n >\n <>\n {shortcuts[0].map((shortcut, index) => (\n <span\n className={doClassnames([\n 'keyboard-shortcut-item__key',\n texts.type,\n ])}\n key={index}\n role=\"presentation\"\n >\n {shortcut}\n </span>\n ))}\n {shortcuts[1] !== undefined && (\n <>\n <span\n className={doClassnames([\n 'keyboard-shortcut-item__separator',\n texts.type,\n ])}\n role=\"presentation\"\n aria-hidden=\"true\"\n >\n {separator}\n </span>\n {shortcuts[1].map((shortcut, index) => (\n <span\n className={doClassnames([\n 'keyboard-shortcut-item__key',\n texts.type,\n ])}\n key={index}\n role=\"presentation\"\n >\n {shortcut}\n </span>\n ))}\n </>\n )}\n </>\n </div>\n </li>\n )\n}\n\nexport default KeyboardShortcutItem\n"],"names":["KeyboardShortcutItem","props","label","shortcuts","separator","jsxs","jsx","texts","Fragment","shortcut","index","doClassnames"],"mappings":";;;AAoBA,MAAMA,IAAuB,CAACC,MAAqC;AACjE,QAAM,EAAE,OAAAC,GAAO,WAAAC,IAAY,CAAA,GAAI,WAAAC,IAAY,OAAOH;AAElD,SACE,gBAAAI,EAAC,MAAA,EAAG,WAAU,0BACZ,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAM;AAAA,YACjB,MAAK;AAAA,YAEJ,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,IAEF,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QAEL,UAAA,gBAAAD,EAAAG,GAAA,EACG,UAAA;AAAA,UAAAL,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWK,EAAa;AAAA,gBACtB;AAAA,gBACAJ,EAAM;AAAA,cAAA,CACP;AAAA,cAED,MAAK;AAAA,cAEJ,UAAAE;AAAA,YAAA;AAAA,YAHIC;AAAA,UAAA,CAKR;AAAA,UACAP,EAAU,CAAC,MAAM,UAChB,gBAAAE,EAAAG,GAAA,EACE,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBACD,MAAK;AAAA,gBACL,eAAY;AAAA,gBAEX,UAAAH;AAAA,cAAA;AAAA,YAAA;AAAA,YAEFD,EAAU,CAAC,EAAE,IAAI,CAACM,GAAUC,MAC3B,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWK,EAAa;AAAA,kBACtB;AAAA,kBACAJ,EAAM;AAAA,gBAAA,CACP;AAAA,gBAED,MAAK;AAAA,gBAEJ,UAAAE;AAAA,cAAA;AAAA,cAHIC;AAAA,YAAA,CAKR;AAAA,UAAA,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
|
|
3
2
|
interface SelectedColor {
|
|
4
3
|
id: string | undefined;
|
|
5
4
|
position: number;
|
|
@@ -79,12 +78,12 @@ export interface SortableListProps<T = DefaultData> {
|
|
|
79
78
|
*/
|
|
80
79
|
onRefoldOptions: () => void;
|
|
81
80
|
}
|
|
82
|
-
export interface
|
|
81
|
+
export interface SortableListState {
|
|
83
82
|
selectedElement: SelectedColor;
|
|
84
83
|
hoveredElement: HoveredColor;
|
|
85
84
|
hasTopBorder: boolean;
|
|
86
85
|
}
|
|
87
|
-
export default class SortableList<T extends DefaultData> extends React.Component<SortableListProps<T>,
|
|
86
|
+
export default class SortableList<T extends DefaultData> extends React.Component<SortableListProps<T>, SortableListState> {
|
|
88
87
|
private listRef;
|
|
89
88
|
static defaultProps: Partial<SortableListProps>;
|
|
90
89
|
constructor(props: SortableListProps<T>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,sBAAsB,CAAA;AAE7B,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,UAAU,YAAa,SAAQ,aAAa;IAC1C,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,WAAW;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IACd;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACnC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,sCAAsC;QACtC,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,+BAA+B;QAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,oBAAoB,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAC5C,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;IACrC;;OAEG;IACH,eAAe,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"SortableList.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,sBAAsB,CAAA;AAE7B,UAAU,aAAa;IACrB,EAAE,EAAE,MAAM,GAAG,SAAS,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAA;CACX;AAED,UAAU,YAAa,SAAQ,aAAa;IAC1C,aAAa,EAAE,OAAO,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,WAAW;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;IACd;;OAEG;IACH,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACnC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC;QACpB,sCAAsC;QACtC,KAAK,EAAE,MAAM,CAAA;QACb,mBAAmB;QACnB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;KACtB,CAAC,CAAA;IACF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,+BAA+B;QAC/B,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,qCAAqC;QACrC,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,oBAAoB,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAC5C,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAA;IACrC;;OAEG;IACH,eAAe,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,aAAa,CAAA;IAC9B,cAAc,EAAE,YAAY,CAAA;IAC5B,YAAY,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,CAAC,SAAS,WAAW,CAAE,SAAQ,KAAK,CAAC,SAAS,CAC9E,iBAAiB,CAAC,CAAC,CAAC,EACpB,iBAAiB,CAClB;IACC,OAAO,CAAC,OAAO,CAAmC;IAElD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAK9C;gBAEW,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAoBvC,iBAAiB,aACgD;IAEjE,oBAAoB,aACgD;IAEpE,kBAAkB,GAAI,GAAG,KAAK,UAY7B;IAGD,YAAY,aA4BX;IAED,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,GACtD,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAChC,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAsB1C;IAED,WAAW,GACT,IAAI,MAAM,GAAG,SAAS,EACtB,eAAe,OAAO,EACtB,eAAe,OAAO,EACtB,UAAU,MAAM,UAUjB;IAED,kBAAkB,GAAI,GAAG,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,UAYtD;IAED,aAAa,GACX,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,UAYxE;IAGD,QAAQ,GAAI,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,UAO7C;IAGD,MAAM;CAoEP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n id: string | undefined\n position: number\n}\n\ninterface DefaultData {\n id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n hasGuideAbove: boolean\n hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n /**\n * Array of data items\n */\n data: Array<T>\n /**\n * Array of primary content nodes\n */\n primarySlot: Array<React.ReactNode>\n /**\n * Array of secondary content configurations\n */\n secondarySlot?: Array<{\n /** Title for the secondary content */\n title: string\n /** Content node */\n node: React.ReactNode\n }>\n /**\n * Array of action button nodes\n */\n actionsSlot?: Array<React.ReactNode>\n /**\n * Content to display when list is empty\n */\n emptySlot?: React.ReactNode\n /**\n * Helper texts for buttons\n */\n helpers?: {\n /** Helper for remove button */\n remove?: string\n /** Helper for more options button */\n more?: string\n }\n /**\n * Whether the list is scrollable\n * @default false\n */\n isScrollable?: boolean\n /**\n * Whether to show a top border on scroll\n * @default false\n */\n isTopBorderEnabled?: boolean\n /**\n * Whether the list can be empty\n * @default true\n */\n canBeEmpty?: boolean\n /**\n * Whether the list is blocked\n * @default false\n */\n isBlocked?: boolean\n /**\n * Change handler when list is reordered\n */\n onChangeSortableList: (data: Array<T>) => void\n /**\n * Remove item handler\n */\n onRemoveItem: React.MouseEventHandler<Element> &\n React.KeyboardEventHandler<Element>\n /**\n * Refold options handler\n */\n onRefoldOptions: () => void\n}\n\nexport interface SortableListStates {\n selectedElement: SelectedColor\n hoveredElement: HoveredColor\n hasTopBorder: boolean\n}\n\nexport default class SortableList<\n T extends DefaultData,\n> extends React.Component<SortableListProps<T>, SortableListStates> {\n private listRef: React.RefObject<HTMLUListElement>\n\n static defaultProps: Partial<SortableListProps> = {\n isScrollable: false,\n isTopBorderEnabled: false,\n canBeEmpty: true,\n isBlocked: false,\n }\n\n constructor(props: SortableListProps<T>) {\n super(props)\n this.state = {\n selectedElement: {\n id: undefined,\n position: 0,\n },\n hoveredElement: {\n id: undefined,\n hasGuideAbove: false,\n hasGuideBelow: false,\n position: 0,\n },\n hasTopBorder: false,\n }\n this.listRef = React.createRef()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n // Lifecycle\n componentDidMount = () =>\n document.addEventListener('mousedown', this.handleClickOutside)\n\n componentWillUnmount = () =>\n document.removeEventListener('mousedown', this.handleClickOutside)\n\n handleClickOutside = (e: Event) => {\n if (this.listRef.current !== null)\n if (\n !this.listRef.current.contains(e.target as HTMLElement) ||\n e.target === this.listRef.current\n )\n this.setState({\n selectedElement: {\n id: undefined,\n position: 0,\n },\n })\n }\n\n // Handlers\n orderHandler = () => {\n const { onChangeSortableList, data } = this.props\n const { selectedElement, hoveredElement } = this.state\n\n const source: SelectedColor = selectedElement,\n target: HoveredColor = hoveredElement,\n duplicatedData = data.map((el) => el)\n\n let position: number\n const sourceIndex = duplicatedData.findIndex(\n (item) => item.id === source.id\n )\n\n const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n if (target.hasGuideAbove && target.position > source.position)\n position = target.position - 1\n else if (target.hasGuideBelow && target.position > source.position)\n position = target.position\n else if (target.hasGuideAbove && target.position < source.position)\n position = target.position\n else if (target.hasGuideBelow && target.position < source.position)\n position = target.position + 1\n else position = target.position\n\n duplicatedData.splice(position, 0, removedElement)\n\n onChangeSortableList(duplicatedData)\n }\n\n selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n React.MouseEventHandler<Element> &\n React.FocusEventHandler<HTMLInputElement> = (e) => {\n const item = e.currentTarget as HTMLElement\n const target = e.target as HTMLElement\n\n if (\n target.tagName === 'INPUT' ||\n target.tagName === 'BUTTON' ||\n target.tagName === 'TEXTAREA'\n )\n return this.setState({\n selectedElement: {\n id: undefined,\n position: 0,\n },\n })\n\n return this.setState({\n selectedElement: {\n id: item.dataset.id,\n position: parseFloat(item.dataset.position ?? '0'),\n },\n })\n }\n\n dragHandler = (\n id: string | undefined,\n hasGuideAbove: boolean,\n hasGuideBelow: boolean,\n position: number\n ) => {\n this.setState({\n hoveredElement: {\n id: id,\n hasGuideAbove: hasGuideAbove,\n hasGuideBelow: hasGuideBelow,\n position: position,\n },\n })\n }\n\n dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n const target = e.target,\n parent: ParentNode =\n (target as HTMLElement).parentNode ?? (target as HTMLElement),\n scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n .scrollTop,\n parentRefTop: number = (parent as HTMLElement).offsetTop,\n parentRefBottom: number =\n parentRefTop + (parent as HTMLElement).clientHeight\n\n if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n }\n\n removeHandler = (\n e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n ) => {\n const { onChangeSortableList, data } = this.props\n const duplicatedData = data.map((el) => el)\n let id: string | null\n const element: HTMLElement | null = (\n e.currentTarget as HTMLElement\n ).closest('.draggable-item')\n\n element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n }\n\n // Direct Actions\n onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n const { isTopBorderEnabled } = this.props\n\n e.preventDefault()\n if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n this.setState({ hasTopBorder: true })\n else this.setState({ hasTopBorder: false })\n }\n\n // Render\n render() {\n const {\n data,\n canBeEmpty,\n isBlocked,\n primarySlot,\n secondarySlot,\n actionsSlot,\n emptySlot,\n helpers,\n isScrollable,\n onRemoveItem,\n onRefoldOptions,\n } = this.props\n const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n if (data.length === 0 && canBeEmpty)\n return <div className=\"sortable-list\">{emptySlot}</div>\n return (\n <ul\n className={doClassnames([\n 'sortable-list',\n isScrollable && 'sortable-list--scrollable',\n hasTopBorder && 'sortable-list--top-border',\n ])}\n onScroll={this.onScroll}\n ref={this.listRef}\n >\n {data.map((item, index) => (\n <DraggableItem\n key={item.id}\n id={item.id}\n index={index}\n canBeRemoved={\n (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n }\n primarySlot={primarySlot[index]}\n secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n selected={selectedElement.id === item.id}\n helpers={{\n remove: helpers?.remove,\n more: helpers?.more,\n }}\n guideAbove={\n hoveredElement.id === item.id\n ? hoveredElement.hasGuideAbove\n : false\n }\n guideBelow={\n hoveredElement.id === item.id\n ? hoveredElement.hasGuideBelow\n : false\n }\n isBlocked={isBlocked}\n onCancelSelection={this.selectionHandler}\n onRefoldOptions={onRefoldOptions}\n onChangeOrder={this.orderHandler}\n onRemove={onRemoveItem}\n onChangeSelection={this.selectionHandler}\n onDragChange={this.dragHandler}\n onDropOutside={this.orderHandler}\n aria-selected={selectedElement.id === item.id}\n />\n ))}\n </ul>\n )\n }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SortableList.js","sources":["../../../../src/components/lists/sortable-list/SortableList.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport DraggableItem from '../draggable-item/DraggableItem'\nimport './sortable-list.scss'\n\ninterface SelectedColor {\n id: string | undefined\n position: number\n}\n\ninterface DefaultData {\n id: string\n}\n\ninterface HoveredColor extends SelectedColor {\n hasGuideAbove: boolean\n hasGuideBelow: boolean\n}\n\nexport interface SortableListProps<T = DefaultData> {\n /**\n * Array of data items\n */\n data: Array<T>\n /**\n * Array of primary content nodes\n */\n primarySlot: Array<React.ReactNode>\n /**\n * Array of secondary content configurations\n */\n secondarySlot?: Array<{\n /** Title for the secondary content */\n title: string\n /** Content node */\n node: React.ReactNode\n }>\n /**\n * Array of action button nodes\n */\n actionsSlot?: Array<React.ReactNode>\n /**\n * Content to display when list is empty\n */\n emptySlot?: React.ReactNode\n /**\n * Helper texts for buttons\n */\n helpers?: {\n /** Helper for remove button */\n remove?: string\n /** Helper for more options button */\n more?: string\n }\n /**\n * Whether the list is scrollable\n * @default false\n */\n isScrollable?: boolean\n /**\n * Whether to show a top border on scroll\n * @default false\n */\n isTopBorderEnabled?: boolean\n /**\n * Whether the list can be empty\n * @default true\n */\n canBeEmpty?: boolean\n /**\n * Whether the list is blocked\n * @default false\n */\n isBlocked?: boolean\n /**\n * Change handler when list is reordered\n */\n onChangeSortableList: (data: Array<T>) => void\n /**\n * Remove item handler\n */\n onRemoveItem: React.MouseEventHandler<Element> &\n React.KeyboardEventHandler<Element>\n /**\n * Refold options handler\n */\n onRefoldOptions: () => void\n}\n\nexport interface SortableListState {\n selectedElement: SelectedColor\n hoveredElement: HoveredColor\n hasTopBorder: boolean\n}\n\nexport default class SortableList<T extends DefaultData> extends React.Component<\n SortableListProps<T>,\n SortableListState\n> {\n private listRef: React.RefObject<HTMLUListElement>\n\n static defaultProps: Partial<SortableListProps> = {\n isScrollable: false,\n isTopBorderEnabled: false,\n canBeEmpty: true,\n isBlocked: false,\n }\n\n constructor(props: SortableListProps<T>) {\n super(props)\n this.state = {\n selectedElement: {\n id: undefined,\n position: 0,\n },\n hoveredElement: {\n id: undefined,\n hasGuideAbove: false,\n hasGuideBelow: false,\n position: 0,\n },\n hasTopBorder: false,\n }\n this.listRef = React.createRef()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n // Lifecycle\n componentDidMount = () =>\n document.addEventListener('mousedown', this.handleClickOutside)\n\n componentWillUnmount = () =>\n document.removeEventListener('mousedown', this.handleClickOutside)\n\n handleClickOutside = (e: Event) => {\n if (this.listRef.current !== null)\n if (\n !this.listRef.current.contains(e.target as HTMLElement) ||\n e.target === this.listRef.current\n )\n this.setState({\n selectedElement: {\n id: undefined,\n position: 0,\n },\n })\n }\n\n // Handlers\n orderHandler = () => {\n const { onChangeSortableList, data } = this.props\n const { selectedElement, hoveredElement } = this.state\n\n const source: SelectedColor = selectedElement,\n target: HoveredColor = hoveredElement,\n duplicatedData = data.map((el) => el)\n\n let position: number\n const sourceIndex = duplicatedData.findIndex(\n (item) => item.id === source.id\n )\n\n const [removedElement] = duplicatedData.splice(sourceIndex, 1)\n\n if (target.hasGuideAbove && target.position > source.position)\n position = target.position - 1\n else if (target.hasGuideBelow && target.position > source.position)\n position = target.position\n else if (target.hasGuideAbove && target.position < source.position)\n position = target.position\n else if (target.hasGuideBelow && target.position < source.position)\n position = target.position + 1\n else position = target.position\n\n duplicatedData.splice(position, 0, removedElement)\n\n onChangeSortableList(duplicatedData)\n }\n\n selectionHandler: React.MouseEventHandler<HTMLLIElement> &\n React.MouseEventHandler<Element> &\n React.FocusEventHandler<HTMLInputElement> = (e) => {\n const item = e.currentTarget as HTMLElement\n const target = e.target as HTMLElement\n\n if (\n target.tagName === 'INPUT' ||\n target.tagName === 'BUTTON' ||\n target.tagName === 'TEXTAREA'\n )\n return this.setState({\n selectedElement: {\n id: undefined,\n position: 0,\n },\n })\n\n return this.setState({\n selectedElement: {\n id: item.dataset.id,\n position: parseFloat(item.dataset.position ?? '0'),\n },\n })\n }\n\n dragHandler = (\n id: string | undefined,\n hasGuideAbove: boolean,\n hasGuideBelow: boolean,\n position: number\n ) => {\n this.setState({\n hoveredElement: {\n id: id,\n hasGuideAbove: hasGuideAbove,\n hasGuideBelow: hasGuideBelow,\n position: position,\n },\n })\n }\n\n dropOutsideHandler = (e: React.DragEvent<HTMLLIElement>) => {\n const target = e.target,\n parent: ParentNode =\n (target as HTMLElement).parentNode ?? (target as HTMLElement),\n scrollY: number = (parent.parentNode?.parentNode as HTMLElement)\n .scrollTop,\n parentRefTop: number = (parent as HTMLElement).offsetTop,\n parentRefBottom: number =\n parentRefTop + (parent as HTMLElement).clientHeight\n\n if (e.pageY + scrollY < parentRefTop) this.orderHandler()\n else if (e.pageY + scrollY > parentRefBottom) this.orderHandler()\n }\n\n removeHandler = (\n e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n ) => {\n const { onChangeSortableList, data } = this.props\n const duplicatedData = data.map((el) => el)\n let id: string | null\n const element: HTMLElement | null = (\n e.currentTarget as HTMLElement\n ).closest('.draggable-item')\n\n element !== null ? (id = element.getAttribute('data-id')) : (id = null)\n\n onChangeSortableList(duplicatedData.filter((item) => item.id !== id))\n }\n\n // Direct Actions\n onScroll = (e: React.UIEvent<HTMLUListElement>) => {\n const { isTopBorderEnabled } = this.props\n\n e.preventDefault()\n if (e.currentTarget.scrollTop > 0 && isTopBorderEnabled)\n this.setState({ hasTopBorder: true })\n else this.setState({ hasTopBorder: false })\n }\n\n // Render\n render() {\n const {\n data,\n canBeEmpty,\n isBlocked,\n primarySlot,\n secondarySlot,\n actionsSlot,\n emptySlot,\n helpers,\n isScrollable,\n onRemoveItem,\n onRefoldOptions,\n } = this.props\n const { selectedElement, hoveredElement, hasTopBorder } = this.state\n\n if (data.length === 0 && canBeEmpty)\n return <div className=\"sortable-list\">{emptySlot}</div>\n return (\n <ul\n className={doClassnames([\n 'sortable-list',\n isScrollable && 'sortable-list--scrollable',\n hasTopBorder && 'sortable-list--top-border',\n ])}\n onScroll={this.onScroll}\n ref={this.listRef}\n >\n {data.map((item, index) => (\n <DraggableItem\n key={item.id}\n id={item.id}\n index={index}\n canBeRemoved={\n (data.length > 1 && !isBlocked) || (canBeEmpty && !isBlocked)\n }\n primarySlot={primarySlot[index]}\n secondarySlot={secondarySlot ? secondarySlot[index] : undefined}\n actionsSlot={actionsSlot ? actionsSlot[index] : undefined}\n selected={selectedElement.id === item.id}\n helpers={{\n remove: helpers?.remove,\n more: helpers?.more,\n }}\n guideAbove={\n hoveredElement.id === item.id\n ? hoveredElement.hasGuideAbove\n : false\n }\n guideBelow={\n hoveredElement.id === item.id\n ? hoveredElement.hasGuideBelow\n : false\n }\n isBlocked={isBlocked}\n onCancelSelection={this.selectionHandler}\n onRefoldOptions={onRefoldOptions}\n onChangeOrder={this.orderHandler}\n onRemove={onRemoveItem}\n onChangeSelection={this.selectionHandler}\n onDragChange={this.dragHandler}\n onDropOutside={this.orderHandler}\n aria-selected={selectedElement.id === item.id}\n />\n ))}\n </ul>\n )\n }\n}\n"],"names":["SortableList","React","props","onChangeSortableList","data","selectedElement","hoveredElement","source","target","duplicatedData","el","position","sourceIndex","item","removedElement","id","hasGuideAbove","hasGuideBelow","parent","scrollY","parentRefTop","parentRefBottom","element","isTopBorderEnabled","canBeEmpty","isBlocked","primarySlot","secondarySlot","actionsSlot","emptySlot","helpers","isScrollable","onRemoveItem","onRefoldOptions","hasTopBorder","jsx","doClassnames","index","DraggableItem"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAM1C,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC;QACV,gBAAgB;QAChB,KAAK,EAAE,MAAM,CAAA;QACb,oBAAoB;QACpB,EAAE,EAAE,MAAM,CAAA;QACV,oBAAoB;QACpB,IAAI,CAAC,EAAE;YACL,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;YACxB,IAAI,EAAE,QAAQ,CAAA;SACf,CAAA;QACD,mCAAmC;QACnC,SAAS,EAAE,OAAO,CAAA;QAClB,oCAAoC;QACpC,KAAK,CAAC,EAAE,OAAO,CAAA;KAChB,CAAC,CAAA;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,MAAM,EAAE,KAAK,CAAC,iBAAiB,GAAG,KAAK,CAAC,oBAAoB,CAAA;CAC7D;AAED,QAAA,MAAM,IAAI,GAAI,OAAO,SAAS,mDA2K7B,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import '../../../assets/Tabs.css';
|
|
2
2
|
import { jsx as n, jsxs as l } from "react/jsx-runtime";
|
|
3
3
|
import { useState as I, useRef as L, useEffect as C } from "react";
|
|
4
|
+
import { t as a } from "../../../do-classnames-DSDFCvzy.js";
|
|
4
5
|
import c from "../../../styles/texts/texts.module.js";
|
|
5
6
|
import f from "../../tags/chip/Chip.js";
|
|
6
7
|
import { Icon as T } from "../../assets/icon/Icon.js";
|
|
7
8
|
import O from "../../actions/menu/Menu.js";
|
|
8
|
-
import { t as a } from "../../../do-classnames-DSDFCvzy.js";
|
|
9
9
|
const D = (h) => {
|
|
10
10
|
const {
|
|
11
11
|
tabs: r,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"sourcesContent":["import './tabs.scss'\nimport { useState, useRef, useEffect } from 'react'\nimport { IconList } from '@tps/icon.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon'\nimport Menu from '@components/actions/menu/Menu'\nimport { doClassnames } from '@a_ng_d/figmug-utils'\n\nexport interface TabsProps {\n /**\n * Array of tab configurations\n */\n tabs: Array<{\n /** Tab label */\n label: string\n /** Unique tab ID */\n id: string\n /** Optional icon */\n icon?: {\n type: 'PICTO' | 'LETTER'\n name: IconList\n }\n /** Whether tab has been updated */\n isUpdated: boolean\n /** Whether to show a \"New\" badge */\n isNew?: boolean\n }>\n /**\n * ID of the active tab\n */\n active: string\n /**\n * Layout direction\n * @default 'HORIZONTAL'\n */\n direction?: 'HORIZONTAL' | 'VERTICAL'\n /**\n * Whether tabs should use flex layout\n * @default false\n */\n isFlex?: boolean\n /**\n * Maximum number of tabs to display before collapsing into menu\n * @default 3\n */\n maxVisibleTabs?: number\n /**\n * Click handler\n */\n action: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nconst Tabs = (props: TabsProps) => {\n const {\n tabs,\n active,\n direction = 'HORIZONTAL',\n isFlex = false,\n maxVisibleTabs = 3,\n action,\n } = props\n\n const [windowWidth, setWindowWidth] = useState(window.innerWidth)\n const menuContainerId = useRef(\n `tabs-menu-${Math.random().toString(36).substr(2, 9)}`\n )\n\n useEffect(() => {\n const handleResize = () => setWindowWidth(window.innerWidth)\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n if (tabs.length > 1) {\n const effectiveDirection = windowWidth <= 460 ? 'HORIZONTAL' : direction\n\n if (windowWidth > 460)\n return (\n <div\n className={doClassnames([\n 'tabs',\n effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n ])}\n role=\"tablist\"\n aria-orientation={\n effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n }\n >\n {tabs.map((tab) => (\n <div\n role=\"tab\"\n key={tab.label.toLowerCase()}\n className={doClassnames([\n 'tabs__tab',\n active === tab.id && 'tabs__tab--active',\n tab.isUpdated && 'tabs__tab--updated',\n tab.icon !== undefined && 'tabs__tab--with-icon',\n isFlex &&\n effectiveDirection !== 'VERTICAL' &&\n 'tabs__tab--flex',\n ])}\n data-feature={tab.id}\n tabIndex={active === tab.id ? -1 : 0}\n onMouseDown={action}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') action(e)\n if (e.key === 'Escape') (e.target as HTMLElement).blur()\n }}\n >\n {tab.icon !== undefined && (\n <Icon\n type={tab.icon.type}\n iconName={\n tab.icon.type === 'PICTO' ? tab.icon.name : undefined\n }\n iconLetter={\n tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n }\n aria-hidden=\"true\"\n />\n )}\n <span\n className={doClassnames([texts.type, texts['type--truncated']])}\n >\n {tab.label}\n </span>\n {tab.isNew && <Chip>New</Chip>}\n </div>\n ))}\n </div>\n )\n\n const responsiveVisibleTabs = tabs.slice(0, maxVisibleTabs - 1)\n const responsiveOverflowTabs = tabs.slice(maxVisibleTabs - 1)\n\n const activeInOverflow = responsiveOverflowTabs.some(\n (tab) => tab.id === active\n )\n\n return (\n <div\n id={menuContainerId.current}\n className={doClassnames([\n 'tabs',\n effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n ])}\n role=\"tablist\"\n aria-orientation={\n effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n }\n >\n {responsiveVisibleTabs.map((tab) => (\n <div\n role=\"tab\"\n key={tab.label.toLowerCase()}\n className={doClassnames([\n 'tabs__tab',\n active === tab.id && 'tabs__tab--active',\n tab.isUpdated && 'tabs__tab--updated',\n tab.icon !== undefined && 'tabs__tab--with-icon',\n isFlex && effectiveDirection !== 'VERTICAL' && 'tabs__tab--flex',\n ])}\n data-feature={tab.id}\n tabIndex={active === tab.id ? -1 : 0}\n onMouseDown={action}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') action(e)\n if (e.key === 'Escape') (e.target as HTMLElement).blur()\n }}\n >\n {tab.icon !== undefined && (\n <Icon\n type={tab.icon.type}\n iconName={tab.icon.type === 'PICTO' ? tab.icon.name : undefined}\n iconLetter={\n tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n }\n aria-hidden=\"true\"\n />\n )}\n <span\n className={doClassnames([texts.type, texts['type--truncated']])}\n >\n {tab.label}\n </span>\n {tab.isNew && <Chip>New</Chip>}\n </div>\n ))}\n\n {responsiveOverflowTabs.length > 0 && (\n <Menu\n id=\"tabs-overflow-menu\"\n type=\"ICON\"\n icon=\"ellipses\"\n options={responsiveOverflowTabs.map((tab) => ({\n label: tab.label,\n value: tab.id,\n type: 'OPTION',\n isNew: tab.isNew,\n action: (e: React.MouseEvent | React.KeyboardEvent) => {\n const mockTarget = {\n dataset: { feature: tab.id },\n }\n\n const mockEvent = {\n ...e,\n target: mockTarget,\n currentTarget: mockTarget,\n } as unknown as React.MouseEvent & React.KeyboardEvent\n\n action(mockEvent)\n },\n }))}\n selected={activeInOverflow ? active : undefined}\n alignment=\"BOTTOM_LEFT\"\n isNew={activeInOverflow}\n />\n )}\n </div>\n )\n }\n\n return null\n}\n\nexport default Tabs\n"],"names":["Tabs","props","tabs","active","direction","isFlex","maxVisibleTabs","action","windowWidth","setWindowWidth","useState","menuContainerId","useRef","useEffect","handleResize","effectiveDirection","jsx","doClassnames","tab","jsxs","e","Icon","texts","Chip","responsiveVisibleTabs","responsiveOverflowTabs","activeInOverflow","Menu","mockTarget","mockEvent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.js","sources":["../../../../src/components/lists/tabs/Tabs.tsx"],"sourcesContent":["import './tabs.scss'\nimport { useState, useRef, useEffect } from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport { IconList } from '@tps/icon.types'\nimport texts from '@styles/texts/texts.module.scss'\nimport Chip from '@components/tags/chip/Chip'\nimport Icon from '@components/assets/icon/Icon'\nimport Menu from '@components/actions/menu/Menu'\n\nexport interface TabsProps {\n /**\n * Array of tab configurations\n */\n tabs: Array<{\n /** Tab label */\n label: string\n /** Unique tab ID */\n id: string\n /** Optional icon */\n icon?: {\n type: 'PICTO' | 'LETTER'\n name: IconList\n }\n /** Whether tab has been updated */\n isUpdated: boolean\n /** Whether to show a \"New\" badge */\n isNew?: boolean\n }>\n /**\n * ID of the active tab\n */\n active: string\n /**\n * Layout direction\n * @default 'HORIZONTAL'\n */\n direction?: 'HORIZONTAL' | 'VERTICAL'\n /**\n * Whether tabs should use flex layout\n * @default false\n */\n isFlex?: boolean\n /**\n * Maximum number of tabs to display before collapsing into menu\n * @default 3\n */\n maxVisibleTabs?: number\n /**\n * Click handler\n */\n action: React.MouseEventHandler & React.KeyboardEventHandler\n}\n\nconst Tabs = (props: TabsProps) => {\n const {\n tabs,\n active,\n direction = 'HORIZONTAL',\n isFlex = false,\n maxVisibleTabs = 3,\n action,\n } = props\n\n const [windowWidth, setWindowWidth] = useState(window.innerWidth)\n const menuContainerId = useRef(\n `tabs-menu-${Math.random().toString(36).substr(2, 9)}`\n )\n\n useEffect(() => {\n const handleResize = () => setWindowWidth(window.innerWidth)\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n if (tabs.length > 1) {\n const effectiveDirection = windowWidth <= 460 ? 'HORIZONTAL' : direction\n\n if (windowWidth > 460)\n return (\n <div\n className={doClassnames([\n 'tabs',\n effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n ])}\n role=\"tablist\"\n aria-orientation={\n effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n }\n >\n {tabs.map((tab) => (\n <div\n role=\"tab\"\n key={tab.label.toLowerCase()}\n className={doClassnames([\n 'tabs__tab',\n active === tab.id && 'tabs__tab--active',\n tab.isUpdated && 'tabs__tab--updated',\n tab.icon !== undefined && 'tabs__tab--with-icon',\n isFlex &&\n effectiveDirection !== 'VERTICAL' &&\n 'tabs__tab--flex',\n ])}\n data-feature={tab.id}\n tabIndex={active === tab.id ? -1 : 0}\n onMouseDown={action}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') action(e)\n if (e.key === 'Escape') (e.target as HTMLElement).blur()\n }}\n >\n {tab.icon !== undefined && (\n <Icon\n type={tab.icon.type}\n iconName={\n tab.icon.type === 'PICTO' ? tab.icon.name : undefined\n }\n iconLetter={\n tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n }\n aria-hidden=\"true\"\n />\n )}\n <span\n className={doClassnames([texts.type, texts['type--truncated']])}\n >\n {tab.label}\n </span>\n {tab.isNew && <Chip>New</Chip>}\n </div>\n ))}\n </div>\n )\n\n const responsiveVisibleTabs = tabs.slice(0, maxVisibleTabs - 1)\n const responsiveOverflowTabs = tabs.slice(maxVisibleTabs - 1)\n\n const activeInOverflow = responsiveOverflowTabs.some(\n (tab) => tab.id === active\n )\n\n return (\n <div\n id={menuContainerId.current}\n className={doClassnames([\n 'tabs',\n effectiveDirection === 'VERTICAL' && 'tabs--vertical',\n ])}\n role=\"tablist\"\n aria-orientation={\n effectiveDirection === 'VERTICAL' ? 'vertical' : 'horizontal'\n }\n >\n {responsiveVisibleTabs.map((tab) => (\n <div\n role=\"tab\"\n key={tab.label.toLowerCase()}\n className={doClassnames([\n 'tabs__tab',\n active === tab.id && 'tabs__tab--active',\n tab.isUpdated && 'tabs__tab--updated',\n tab.icon !== undefined && 'tabs__tab--with-icon',\n isFlex && effectiveDirection !== 'VERTICAL' && 'tabs__tab--flex',\n ])}\n data-feature={tab.id}\n tabIndex={active === tab.id ? -1 : 0}\n onMouseDown={action}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') action(e)\n if (e.key === 'Escape') (e.target as HTMLElement).blur()\n }}\n >\n {tab.icon !== undefined && (\n <Icon\n type={tab.icon.type}\n iconName={tab.icon.type === 'PICTO' ? tab.icon.name : undefined}\n iconLetter={\n tab.icon.type === 'LETTER' ? tab.icon.name : undefined\n }\n aria-hidden=\"true\"\n />\n )}\n <span\n className={doClassnames([texts.type, texts['type--truncated']])}\n >\n {tab.label}\n </span>\n {tab.isNew && <Chip>New</Chip>}\n </div>\n ))}\n\n {responsiveOverflowTabs.length > 0 && (\n <Menu\n id=\"tabs-overflow-menu\"\n type=\"ICON\"\n icon=\"ellipses\"\n options={responsiveOverflowTabs.map((tab) => ({\n label: tab.label,\n value: tab.id,\n type: 'OPTION',\n isNew: tab.isNew,\n action: (e: React.MouseEvent | React.KeyboardEvent) => {\n const mockTarget = {\n dataset: { feature: tab.id },\n }\n\n const mockEvent = {\n ...e,\n target: mockTarget,\n currentTarget: mockTarget,\n } as unknown as React.MouseEvent & React.KeyboardEvent\n\n action(mockEvent)\n },\n }))}\n selected={activeInOverflow ? active : undefined}\n alignment=\"BOTTOM_LEFT\"\n isNew={activeInOverflow}\n />\n )}\n </div>\n )\n }\n\n return null\n}\n\nexport default Tabs\n"],"names":["Tabs","props","tabs","active","direction","isFlex","maxVisibleTabs","action","windowWidth","setWindowWidth","useState","menuContainerId","useRef","useEffect","handleResize","effectiveDirection","jsx","doClassnames","tab","jsxs","e","Icon","texts","Chip","responsiveVisibleTabs","responsiveOverflowTabs","activeInOverflow","Menu","mockTarget","mockEvent"],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
|
|
3
2
|
export interface BarProps {
|
|
4
3
|
/**
|
|
5
4
|
* HTML id attribute
|
|
@@ -57,7 +56,7 @@ export interface BarProps {
|
|
|
57
56
|
}
|
|
58
57
|
export default class Bar extends React.Component<BarProps> {
|
|
59
58
|
static defaultProps: Partial<BarProps>;
|
|
60
|
-
setBorder: (orientation: Array<
|
|
59
|
+
setBorder: (orientation: Array<"TOP" | "LEFT" | "BOTTOM" | "RIGHT"> | undefined) => {
|
|
61
60
|
[key: string]: React.CSSProperties;
|
|
62
61
|
};
|
|
63
62
|
render(): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAMrC;IAED,SAAS,
|
|
1
|
+
{"version":3,"file":"Bar.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/bar/Bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACxC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACzC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACnD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAA;IACvC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACxD,MAAM,CAAC,YAAY,EAAE,OAAO,CAAC,QAAQ,CAAC,CAMrC;IAED,SAAS,GACP,aAAa,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG,SAAS;;MAcpE;IAED,MAAM;CA+EP"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@
|
|
1
|
+
{"version":3,"file":"Bar.js","sources":["../../../../src/components/slots/bar/Bar.tsx"],"sourcesContent":["import React from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport './bar.scss'\n\nexport interface BarProps {\n /**\n * HTML id attribute\n */\n id?: string\n /**\n * Content for the left section\n */\n leftPartSlot?: React.ReactElement | null\n /**\n * Content for the center section (when used alone)\n */\n soloPartSlot?: React.ReactElement | null\n /**\n * Content for the right section\n */\n rightPartSlot?: React.ReactElement | null\n /**\n * Array of border positions\n */\n border?: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'>\n /**\n * Array of clip positions (for visual effects)\n */\n clip?: Array<'LEFT' | 'RIGHT' | 'SOLO'>\n /**\n * Custom padding value\n */\n padding?: string\n /**\n * Whether to use compact spacing\n * @default false\n */\n isCompact?: boolean\n /**\n * Whether the bar contains only text\n * @default false\n */\n isOnlyText?: boolean\n /**\n * Whether to use inverted color scheme\n * @default false\n */\n isInverted?: boolean\n /**\n * Whether to center the content\n * @default false\n */\n isCentered?: boolean\n /**\n * Whether to reflow on small screens\n * @default false\n */\n shouldReflow?: boolean\n}\n\nexport default class Bar extends React.Component<BarProps> {\n static defaultProps: Partial<BarProps> = {\n isCompact: false,\n isOnlyText: false,\n isInverted: false,\n isCentered: false,\n shouldReflow: false,\n }\n\n setBorder = (\n orientation: Array<'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT'> | undefined\n ) => {\n const property =\n 'var(--bar-border-width) solid var(--bar-border-color)' as React.CSSProperties\n const styles: { [key: string]: React.CSSProperties } = {}\n\n if (!orientation) return styles\n orientation.forEach((entry) => {\n if (entry === 'TOP') styles.borderTop = property\n if (entry === 'LEFT') styles.borderLeft = property\n if (entry === 'BOTTOM') styles.borderBottom = property\n if (entry === 'RIGHT') styles.borderRight = property\n })\n return styles\n }\n\n render() {\n const {\n id,\n isCompact,\n isOnlyText,\n isInverted,\n isCentered,\n shouldReflow,\n border,\n padding,\n clip,\n leftPartSlot,\n soloPartSlot,\n rightPartSlot,\n } = this.props\n\n const hasValidSolo = soloPartSlot !== undefined && soloPartSlot !== null\n const hasValidLeft = leftPartSlot !== undefined && leftPartSlot !== null\n const hasValidRight = rightPartSlot !== undefined && rightPartSlot !== null\n\n if (!hasValidSolo && !hasValidLeft && !hasValidRight) return null\n\n const barClassName = doClassnames([\n 'bar',\n isCompact && 'bar--compact',\n isOnlyText && 'bar--text-only',\n isInverted && 'bar--inverted',\n isCentered && 'bar--centered',\n shouldReflow && 'bar--reflow',\n clip && clip.includes('LEFT') && 'bar--clip-left',\n clip && clip.includes('RIGHT') && 'bar--clip-right',\n clip && clip.includes('SOLO') && 'bar--clip-solo',\n ])\n\n if (hasValidSolo)\n return (\n <div\n id={id}\n className={barClassName}\n style={{\n ...this.setBorder(border),\n padding: padding,\n }}\n role=\"toolbar\"\n >\n <div\n className=\"bar__solo\"\n role=\"group\"\n >\n {soloPartSlot}\n </div>\n </div>\n )\n\n return (\n <div\n id={id}\n className={barClassName}\n style={{\n ...this.setBorder(border),\n padding: padding,\n }}\n role=\"toolbar\"\n >\n <div\n className=\"bar__left\"\n role=\"group\"\n >\n {leftPartSlot}\n </div>\n <div\n className=\"bar__right\"\n role=\"group\"\n >\n {rightPartSlot}\n </div>\n </div>\n )\n }\n}\n"],"names":["Bar","React","orientation","property","styles","entry","id","isCompact","isOnlyText","isInverted","isCentered","shouldReflow","border","padding","clip","leftPartSlot","soloPartSlot","rightPartSlot","hasValidSolo","hasValidLeft","hasValidRight","barClassName","doClassnames","jsx","jsxs"],"mappings":";;;AA4DA,MAAqBA,UAAYC,EAAM,UAAoB;AAAA,EACzD,OAAO,eAAkC;AAAA,IACvC,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,cAAc;AAAA,EAAA;AAAA,EAGhB,YAAY,CACVC,MACG;AACH,UAAMC,IACJ,yDACIC,IAAiD,CAAA;AAEvD,WAAKF,KACLA,EAAY,QAAQ,CAACG,MAAU;AAC7B,MAAIA,MAAU,UAAOD,EAAO,YAAYD,IACpCE,MAAU,WAAQD,EAAO,aAAaD,IACtCE,MAAU,aAAUD,EAAO,eAAeD,IAC1CE,MAAU,YAASD,EAAO,cAAcD;AAAA,IAC9C,CAAC,GACMC;AAAA,EACT;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,IAAAE;AAAA,MACA,WAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,QAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,eAAAC;AAAA,IAAA,IACE,KAAK,OAEHC,IAA6CF,KAAiB,MAC9DG,IAA6CJ,KAAiB,MAC9DK,IAA+CH,KAAkB;AAEvE,QAAI,CAACC,KAAgB,CAACC,KAAgB,CAACC,EAAe,QAAO;AAE7D,UAAMC,IAAeC,EAAa;AAAA,MAChC;AAAA,MACAf,KAAa;AAAA,MACbC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAc;AAAA,MACdC,KAAgB;AAAA,MAChBG,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,MACjCA,KAAQA,EAAK,SAAS,OAAO,KAAK;AAAA,MAClCA,KAAQA,EAAK,SAAS,MAAM,KAAK;AAAA,IAAA,CAClC;AAED,WAAII,IAEA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAjB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YAEJ,UAAAP;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,IAKJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,OAAO;AAAA,UACL,GAAG,KAAK,UAAUT,CAAM;AAAA,UACxB,SAAAC;AAAA,QAAA;AAAA,QAEF,MAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,UAEH,gBAAAQ;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cAEJ,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableWindow.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"DraggableWindow.d.ts","sourceRoot":"","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAGtD,OAAO,yBAAyB,CAAA;AAEhC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;IACnC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CA2GnD,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import '../../../assets/DraggableWindow.css';
|
|
2
2
|
import { jsxs as y, jsx as t } from "react/jsx-runtime";
|
|
3
3
|
import { useState as r, useRef as R, useEffect as m } from "react";
|
|
4
|
-
import M from "
|
|
5
|
-
import E from "../../
|
|
6
|
-
import
|
|
4
|
+
import { t as M } from "../../../do-classnames-DSDFCvzy.js";
|
|
5
|
+
import E from "../../assets/section-title/SectionTitle.js";
|
|
6
|
+
import O from "../../actions/button/Button.js";
|
|
7
7
|
import _ from "../bar/Bar.js";
|
|
8
8
|
const N = (w) => {
|
|
9
9
|
const { title: d = "Options", children: p, triggerRef: s, onClose: v } = w, [n, c] = r(!1), [g, x] = r(!1), [o, u] = r({ x: 0, y: 0 }), [a, b] = r({ x: 0, y: 0 }), l = R(null);
|
|
@@ -37,7 +37,7 @@ const N = (w) => {
|
|
|
37
37
|
}, [n, a]), /* @__PURE__ */ y(
|
|
38
38
|
"div",
|
|
39
39
|
{
|
|
40
|
-
className:
|
|
40
|
+
className: M([
|
|
41
41
|
"draggable-window",
|
|
42
42
|
n && "draggable-window--dragging"
|
|
43
43
|
]),
|
|
@@ -60,14 +60,14 @@ const N = (w) => {
|
|
|
60
60
|
_,
|
|
61
61
|
{
|
|
62
62
|
leftPartSlot: /* @__PURE__ */ t(
|
|
63
|
-
|
|
63
|
+
E,
|
|
64
64
|
{
|
|
65
65
|
label: d,
|
|
66
66
|
id: `draggable-window-title-${d}`
|
|
67
67
|
}
|
|
68
68
|
),
|
|
69
69
|
rightPartSlot: /* @__PURE__ */ t(
|
|
70
|
-
|
|
70
|
+
O,
|
|
71
71
|
{
|
|
72
72
|
type: "icon",
|
|
73
73
|
icon: "close",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggableWindow.js","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport SectionTitle from '@components/assets/section-title/SectionTitle'\nimport Button from '@components/actions/button/Button'\nimport
|
|
1
|
+
{"version":3,"file":"DraggableWindow.js","sources":["../../../../src/components/slots/draggable-window/DraggableWindow.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\nimport { doClassnames } from '@unoff/utils'\nimport SectionTitle from '@components/assets/section-title/SectionTitle'\nimport Button from '@components/actions/button/Button'\nimport Bar from '../bar/Bar'\n\nimport './draggable-window.scss'\n\nexport interface DraggableWindowProps {\n /**\n * Title of the window\n * @default 'Options'\n */\n title?: string\n /**\n * Content of the window\n */\n children: React.ReactNode\n /**\n * Reference to the trigger button\n */\n triggerRef: React.RefObject<Button>\n /**\n * Close handler\n */\n onClose: () => void\n}\n\nconst DraggableWindow = (props: DraggableWindowProps) => {\n const { title = 'Options', children, triggerRef, onClose } = props\n const [isDragging, setIsDragging] = useState(false)\n const [isOpen, setIsOpen] = useState(false)\n const [position, setPosition] = useState({ x: 0, y: 0 })\n const [offset, setOffset] = useState({ x: 0, y: 0 })\n const windowRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (triggerRef.current?.buttonRef?.current && windowRef.current) {\n const windowRect = windowRef.current.getBoundingClientRect()\n const triggerRect =\n triggerRef.current.buttonRef.current.getBoundingClientRect()\n\n setPosition({\n x: triggerRect.left - windowRect.width - 8,\n y: 0,\n })\n setIsOpen(true)\n }\n }, [triggerRef])\n\n const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n if (\n e.target instanceof HTMLElement &&\n e.target.closest('.draggable-window__header')\n ) {\n setIsDragging(true)\n setOffset({\n x: e.clientX - position.x,\n y: e.clientY - position.y,\n })\n }\n }\n\n const handleMouseUp = () => {\n setIsDragging(false)\n }\n\n useEffect(() => {\n const handleMouseMove = (e: MouseEvent) => {\n if (isDragging)\n setPosition({\n x: e.clientX - offset.x,\n y: e.clientY - offset.y,\n })\n }\n\n if (isDragging) {\n window.addEventListener('mousemove', handleMouseMove)\n window.addEventListener('mouseup', handleMouseUp)\n }\n\n return () => {\n window.removeEventListener('mousemove', handleMouseMove)\n window.removeEventListener('mouseup', handleMouseUp)\n }\n }, [isDragging, offset])\n\n return (\n <div\n className={doClassnames([\n 'draggable-window',\n isDragging && 'draggable-window--dragging',\n ])}\n style={{\n transform: `translate(${position.x}px, ${position.y}px)`,\n visibility: isOpen ? 'visible' : 'hidden',\n }}\n onMouseDown={handleMouseDown}\n ref={windowRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={!isOpen}\n >\n <div\n className=\"draggable-window__header\"\n role=\"presentation\"\n >\n <Bar\n leftPartSlot={\n <SectionTitle\n label={title}\n id={`draggable-window-title-${title}`}\n />\n }\n rightPartSlot={\n <Button\n type=\"icon\"\n icon=\"close\"\n action={onClose}\n />\n }\n padding=\"0 var(--size-pos-xxsmall)\"\n isCompact\n shouldReflow={false}\n border={['BOTTOM']}\n />\n </div>\n <div\n className=\"draggable-window__content\"\n role=\"document\"\n >\n {children}\n </div>\n </div>\n )\n}\n\nexport default DraggableWindow\n"],"names":["DraggableWindow","props","title","children","triggerRef","onClose","isDragging","setIsDragging","useState","isOpen","setIsOpen","position","setPosition","offset","setOffset","windowRef","useRef","useEffect","windowRect","triggerRect","handleMouseDown","handleMouseUp","handleMouseMove","e","jsxs","doClassnames","jsx","Bar","SectionTitle","Button"],"mappings":"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"}
|