@flux-ui/components 3.1.2 → 3.1.3

package/src/css/component/Form.module.scss

@@ -1134,3 +1134,54 @@
     transition: 210ms var(--swift-out);
     transition-property: background, border-color, color, opacity, scale, translate, mixin.focus-ring-transition-properties();
 }
+
+.formTagsInput {
+    composes: formInput;
+
+    display: flex;
+    height: unset;
+    min-height: 42px;
+    padding: 4px 6px;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    cursor: text;
+
+    &:not(.formTagsInputDisabled) {
+        @include mixin.focus-ring(-1px, true);
+    }
+}
+
+.formTagsInputEnabled {
+    composes: formTagsInput;
+}
+
+.formTagsInputDisabled {
+    composes: formTagsInput;
+
+    background: var(--gray-100);
+    cursor: not-allowed;
+}
+
+.formTagsInputField {
+    height: 30px;
+    min-width: 60px;
+    flex: 1 1 60px;
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    outline: 0;
+
+    &::placeholder {
+        color: var(--foreground-secondary);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+}
+
+.formTagsInputPopup {
+    composes: formSelectPopup;
+}

package/src/css/component/FormRating.module.scss

@@ -0,0 +1,47 @@
+@use '~flux/components/css/mixin';
+
+.formRating {
+    display: inline-flex;
+    gap: .15em;
+    font-size: 24px;
+    line-height: 1;
+    border-radius: 4px;
+
+    @include mixin.focus-ring(4px);
+
+    &.isDisabled {
+        opacity: .6;
+    }
+}
+
+.formRatingStar {
+    position: relative;
+    display: inline-flex;
+    padding: 0;
+    border: 0;
+    background: none;
+    line-height: 0;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: default;
+    }
+}
+
+.formRatingStarEmpty {
+    color: var(--gray-300);
+}
+
+.formRatingStarFull {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    color: var(--warning-400);
+    clip-path: inset(0 calc((1 - var(--fill, 0)) * 100%) 0 0);
+    pointer-events: none;
+}
+
+.isInvalid .formRatingStarEmpty {
+    color: var(--danger-200);
+}

package/src/css/component/InlineEdit.module.scss

@@ -0,0 +1,45 @@
+@use '~flux/components/css/mixin';
+
+.inlineEdit {
+    display: flex;
+    gap: 6px;
+    align-items: flex-start;
+}
+
+.inlineEditField {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.inlineEditActions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.inlineEditDisplay {
+    display: inline-flex;
+    min-height: 30px;
+    padding: 3px 6px;
+    align-items: center;
+    border-radius: 6px;
+    color: var(--foreground);
+    line-height: 21px;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+
+    &.isInteractive {
+        cursor: text;
+
+        @include mixin.focus-ring(2px);
+
+        @include mixin.hover {
+            background: var(--surface-hover);
+        }
+    }
+
+    &.isPlaceholder {
+        color: var(--foreground-secondary);
+    }
+}

package/src/css/component/Menu.module.scss

@@ -33,7 +33,6 @@
 
     display: flex;
     flex-flow: column;
-    gap: 1px;
 }
 
 .menuItem {
@@ -132,6 +131,10 @@
     margin-left: 33px;
 }
 
+.menuConeActive .menuItem {
+    pointer-events: none;
+}
+
 .menuCollapsible {
     display: flex;
     flex-flow: column;

package/src/css/component/MenuFlyout.module.scss

@@ -0,0 +1,38 @@
+.menuFlyoutPopup {
+    composes: basePane from './base/Pane.module.scss';
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    min-width: 270px;
+    max-height: max(330px, 50dvh);
+    overflow: auto;
+    box-shadow: var(--shadow-md);
+    translate: var(--x) var(--y);
+    z-index: 10000;
+}
+
+.menuFlyoutTriggerOpen {
+    background: var(--gray-100);
+}
+
+.menuFlyoutConeDebug {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+    z-index: 20000;
+
+    polygon {
+        fill: var(--primary-500);
+        fill-opacity: .15;
+        stroke: var(--primary-500);
+        stroke-width: 1.5;
+    }
+
+    circle {
+        fill: var(--danger-500);
+    }
+}

package/src/css/component/Table.module.scss

@@ -238,3 +238,19 @@ tfoot .tableCell {
 :not(.basePaneStructure) > .table .tableCell:not(.isBordered):last-child .tableCellContent {
     padding-right: 0;
 }
+
+.tableCellExpand {
+    width: 0;
+}
+
+.tableExpandToggle :global(svg) {
+    transition: rotate .2s var(--swift-out);
+}
+
+.tableExpandToggle.isExpanded :global(svg) {
+    rotate: 90deg;
+}
+
+.tableExpandContent {
+    padding: 12px 15px;
+}

package/src/css/component/Tour.module.scss

@@ -0,0 +1,108 @@
+@use '~flux/components/css/mixin';
+
+.tour {
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+    z-index: 9999;
+}
+
+.tourSpotlight {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: var(--w);
+    height: var(--h);
+    border-radius: 8px;
+    box-shadow: 0 0 0 9999px rgb(0 0 0 / .55);
+    pointer-events: none;
+    translate: var(--x) var(--y);
+    transition: translate .25s var(--swift-out), width .25s var(--swift-out), height .25s var(--swift-out);
+}
+
+.tourPopover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 321px;
+    max-width: calc(100vw - 24px);
+    translate: var(--x) var(--y);
+    z-index: 1;
+
+    &.isStepping {
+        transition: translate .25s var(--swift-out);
+    }
+}
+
+.tourPane {
+    overflow: hidden;
+}
+
+.tourBodyViewport {
+    position: relative;
+    overflow: hidden;
+    transition: height .25s var(--swift-out);
+}
+
+.tourBody {
+    display: flex;
+    padding: 15px 18px;
+    flex-flow: column;
+    gap: 6px;
+    transition: opacity .15s var(--swift-out);
+
+    &:global(.v-leave-active) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    &:global(.v-enter-from),
+    &:global(.v-leave-to) {
+        opacity: 0;
+    }
+}
+
+.tourTitle {
+    color: var(--foreground-prominent);
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.tourContent {
+    font-size: 14px;
+    line-height: 21px;
+    color: var(--foreground);
+}
+
+.tourFooter {
+    display: flex;
+    padding: 12px 18px;
+    gap: 6px;
+    align-items: center;
+    border-top: 1px solid var(--surface-stroke);
+}
+
+.tourProgress {
+    color: var(--foreground-secondary);
+    font-size: 13px;
+}
+
+.tourSkip {
+    font: inherit;
+    font-size: 13px;
+    margin-right: 12px;
+    padding: 0;
+    cursor: pointer;
+    transition: color .15s var(--swift-out);
+    color: var(--foreground-secondary);
+    border: 0;
+    background: none;
+
+    @include mixin.hover {
+        color: var(--foreground);
+    }
+
+    @include mixin.focus-ring(2px);
+}

package/src/css/component/VirtualScroller.module.scss

@@ -0,0 +1,17 @@
+.virtualScroller {
+    position: relative;
+    height: 100%;
+    overflow: auto;
+}
+
+.virtualScrollerSpacer {
+    position: relative;
+    width: 100%;
+}
+
+.virtualScrollerWindow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+}

package/src/data/di.ts

@@ -12,6 +12,7 @@ export const FluxFilterInjectionKey: InjectionKey<FluxFilterInjection> = Symbol(
 export const FluxFormCheckboxGroupInjectionKey: InjectionKey<FluxFormCheckboxGroupInjection> = Symbol();
 export const FluxFormFieldInjectionKey: InjectionKey<FluxFormFieldInjection> = Symbol();
 export const FluxFormRadioGroupInjectionKey: InjectionKey<FluxFormRadioGroupInjection> = Symbol();
+export const FluxMenuFlyoutInjectionKey: InjectionKey<FluxMenuFlyoutInjection> = Symbol();
 export const FluxSegmentedControlInjectionKey: InjectionKey<FluxSegmentedControlInjection> = Symbol();
 export const FluxSplitViewInjectionKey: InjectionKey<FluxSplitViewInjection> = Symbol();
 export const FluxTabBarInjectionKey: InjectionKey<FluxTabBarInjection> = Symbol();
@@ -150,6 +151,45 @@ export type FluxFlyoutInjection = {
     readonly isOpening: Ref<boolean>;
 };
 
+export type FluxMenuFlyoutPointer = {
+    readonly x: number;
+    readonly y: number;
+    readonly px: number;
+    readonly py: number;
+};
+
+export type FluxMenuFlyoutCone = {
+    readonly id: number;
+    readonly ax: number;
+    readonly ay: number;
+    readonly bx: number;
+    readonly by: number;
+    readonly cx: number;
+    readonly cy: number;
+};
+
+export type FluxMenuFlyoutEntry = {
+    getTrigger(): HTMLElement | null;
+    getPopup(): HTMLElement | null;
+    readonly isOpen: Ref<boolean>;
+    close(): void;
+};
+
+export type FluxMenuFlyoutInjection = {
+    readonly debugCone: Ref<boolean>;
+    readonly pointer: Readonly<Ref<FluxMenuFlyoutPointer>>;
+    readonly activeCone: Ref<FluxMenuFlyoutCone | null>;
+    readonly keyboardStack: Ref<number[]>;
+
+    register(entry: FluxMenuFlyoutEntry): void;
+    unregister(entry: FluxMenuFlyoutEntry): void;
+    closeOthers(self: FluxMenuFlyoutEntry): void;
+    hasOpenDescendant(self: FluxMenuFlyoutEntry): boolean;
+    isAimingAtOpenSubmenu(): boolean;
+    isInsidePopups(target: Node | null): boolean;
+    closeAll(): void;
+};
+
 export type FluxFormFieldInjection = {
     readonly id?: string;
     readonly labelId?: string;

package/src/data/i18n.ts

@@ -5,10 +5,14 @@ export const english = {
     'flux.back': 'Back',
     'flux.cancel': 'Cancel',
     'flux.close': 'Close',
+    'flux.collapseRow': 'Collapse row',
+    'flux.expandRow': 'Expand row',
     'flux.comingSoon': 'Coming soon',
     'flux.continue': 'Continue',
+    'flux.createOption': 'Create "{value}"',
     'flux.customPeriod': 'Custom period',
     'flux.delete': 'Delete',
+    'flux.done': 'Done',
     'flux.filter': 'Filter',
     'flux.filterReset': 'Reset filters',
     'flux.justNow': 'Just now',
@@ -21,6 +25,7 @@ export const english = {
     'flux.previewClose': 'Close preview',
     'flux.displayingOf': '{from}–{to} of {total}',
     'flux.showN': 'Show {n}',
+    'flux.skip': 'Skip',
     'flux.next': 'Next',
     'flux.noItems': 'There are no items (left).',
     'flux.pagination': 'Pagination',
@@ -33,6 +38,7 @@ export const english = {
     'flux.sortAscending': 'Ascending',
     'flux.sortDescending': 'Descending',
     'flux.sortRemove': 'Remove sorting',
+    'flux.submenu': 'Submenu',
     'flux.today': 'Today',
     'flux.selectMonth': 'Select month',
     'flux.selectYear': 'Select year',
@@ -42,6 +48,7 @@ export const english = {
     'flux.previousYears': 'Previous years',
     'flux.nextYears': 'Next years',
     'flux.allDay': 'All day',
+    'flux.andNMore': '{n} more',
     'flux.grabbedAnnounce': 'Item grabbed. Use arrow keys to move, Enter to drop, Escape to cancel.',
     'flux.releasedAnnounce': 'Item released.',
     'flux.goToPage': 'Go to page {page}',