From 8d10fe0eaf61a2d934401a9ebed94621a08b7aa1 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 16:43:05 -0700 Subject: [PATCH 01/11] WIP --- packages/calcite-components/.stylelintrc.cjs | 8 +- .../calcite-components/src/components.d.ts | 113 +++++++ .../assets/sort-dropdown/t9n/messages.json | 10 + .../assets/sort-dropdown/t9n/messages_en.json | 10 + .../src/components/sort-dropdown/readme.md | 3 + .../src/components/sort-dropdown/resources.ts | 11 + .../sort-dropdown/sort-dropdown.scss | 51 +++ .../sort-dropdown/sort-dropdown.stories.ts | 11 + .../sort-dropdown/sort-dropdown.tsx | 293 ++++++++++++++++++ .../src/demos/sort-dropdown.html | 27 ++ packages/calcite-components/src/index.html | 191 ++++++------ t9nmanifest.txt | 1 + 12 files changed, 628 insertions(+), 101 deletions(-) create mode 100644 packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json create mode 100644 packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json create mode 100644 packages/calcite-components/src/components/sort-dropdown/readme.md create mode 100644 packages/calcite-components/src/components/sort-dropdown/resources.ts create mode 100644 packages/calcite-components/src/components/sort-dropdown/sort-dropdown.scss create mode 100644 packages/calcite-components/src/components/sort-dropdown/sort-dropdown.stories.ts create mode 100644 packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx create mode 100644 packages/calcite-components/src/demos/sort-dropdown.html diff --git a/packages/calcite-components/.stylelintrc.cjs b/packages/calcite-components/.stylelintrc.cjs index 2e02214db54..0998dad6911 100644 --- a/packages/calcite-components/.stylelintrc.cjs +++ b/packages/calcite-components/.stylelintrc.cjs @@ -1,13 +1,7 @@ // @ts-check // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT -const customFunctions = [ - "get-trailing-text-input-padding", - "medium-modular-scale", - "modular-scale", - "scale-duration", - "small-modular-scale" -]; +const customFunctions = []; // ⚠️ END OF AUTO-GENERATED CODE const scssPatternRules = [ diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index bfa5b3f2fc8..c719d67e8ee 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -79,6 +79,8 @@ import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; +import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; +import { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -174,6 +176,8 @@ export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; +export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; +export { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -4749,6 +4753,58 @@ export namespace Components { */ "value": null | number | number[]; } + interface CalciteSortDropdown { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled": boolean; + /** + * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements": FlipPlacement1[]; + /** + * Specifies the label of the component. + */ + "label": string; + /** + * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. + */ + "maxItems": number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides": Partial; + /** + * Made into a prop for testing purposes only. + * @readonly + */ + "messages": SortDropdownMessages; + /** + * When `true`, displays and positions the component. + */ + "open": boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning": OverlayPositioning1; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-start" + */ + "placement": MenuPlacement1; + /** + * Specifies the size of the component. + */ + "scale": Scale; + /** + * Sets focus on the component. + */ + "setFocus": () => Promise; + /** + * Specifies the width of the component. + */ + "widthScale": Scale; + } interface CalciteSortableList { /** * When provided, the method will be called to determine whether the element can move from the list. @@ -7595,6 +7651,12 @@ declare global { prototype: HTMLCalciteSliderElement; new (): HTMLCalciteSliderElement; }; + interface HTMLCalciteSortDropdownElement extends Components.CalciteSortDropdown, HTMLStencilElement { + } + var HTMLCalciteSortDropdownElement: { + prototype: HTMLCalciteSortDropdownElement; + new (): HTMLCalciteSortDropdownElement; + }; interface HTMLCalciteSortableListElementEventMap { "calciteListOrderChange": void; } @@ -8133,6 +8195,7 @@ declare global { "calcite-shell-center-row": HTMLCalciteShellCenterRowElement; "calcite-shell-panel": HTMLCalciteShellPanelElement; "calcite-slider": HTMLCalciteSliderElement; + "calcite-sort-dropdown": HTMLCalciteSortDropdownElement; "calcite-sortable-list": HTMLCalciteSortableListElement; "calcite-split-button": HTMLCalciteSplitButtonElement; "calcite-stack": HTMLCalciteStackElement; @@ -12951,6 +13014,54 @@ declare namespace LocalJSX { */ "value"?: null | number | number[]; } + interface CalciteSortDropdown { + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + "disabled"?: boolean; + /** + * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. + */ + "flipPlacements"?: FlipPlacement1[]; + /** + * Specifies the label of the component. + */ + "label"?: string; + /** + * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. + */ + "maxItems"?: number; + /** + * Use this property to override individual strings used by the component. + */ + "messageOverrides"?: Partial; + /** + * Made into a prop for testing purposes only. + * @readonly + */ + "messages"?: SortDropdownMessages; + /** + * When `true`, displays and positions the component. + */ + "open"?: boolean; + /** + * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + */ + "overlayPositioning"?: OverlayPositioning1; + /** + * Determines where the component will be positioned relative to the container element. + * @default "bottom-start" + */ + "placement"?: MenuPlacement1; + /** + * Specifies the size of the component. + */ + "scale"?: Scale; + /** + * Specifies the width of the component. + */ + "widthScale"?: Scale; + } interface CalciteSortableList { /** * When provided, the method will be called to determine whether the element can move from the list. @@ -14299,6 +14410,7 @@ declare namespace LocalJSX { "calcite-shell-center-row": CalciteShellCenterRow; "calcite-shell-panel": CalciteShellPanel; "calcite-slider": CalciteSlider; + "calcite-sort-dropdown": CalciteSortDropdown; "calcite-sortable-list": CalciteSortableList; "calcite-split-button": CalciteSplitButton; "calcite-stack": CalciteStack; @@ -14431,6 +14543,7 @@ declare module "@stencil/core" { "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes; "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes; "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes; + "calcite-sort-dropdown": LocalJSX.CalciteSortDropdown & JSXBase.HTMLAttributes; "calcite-sortable-list": LocalJSX.CalciteSortableList & JSXBase.HTMLAttributes; "calcite-split-button": LocalJSX.CalciteSplitButton & JSXBase.HTMLAttributes; "calcite-stack": LocalJSX.CalciteStack & JSXBase.HTMLAttributes; diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json new file mode 100644 index 00000000000..87ff952317b --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json @@ -0,0 +1,10 @@ +{ + "reorder": "Reorder", + "moveTo": "Move to", + "moveToTop": "Move to top", + "moveToBottom": "Move to bottom", + "moveUp": "Move up", + "moveDown": "Move down", + "label": "Reposition: {itemLabel}", + "untitledLabel": "Reposition" +} diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json new file mode 100644 index 00000000000..87ff952317b --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json @@ -0,0 +1,10 @@ +{ + "reorder": "Reorder", + "moveTo": "Move to", + "moveToTop": "Move to top", + "moveToBottom": "Move to bottom", + "moveUp": "Move up", + "moveDown": "Move down", + "label": "Reposition: {itemLabel}", + "untitledLabel": "Reposition" +} diff --git a/packages/calcite-components/src/components/sort-dropdown/readme.md b/packages/calcite-components/src/components/sort-dropdown/readme.md new file mode 100644 index 00000000000..b5e398f9ff1 --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/readme.md @@ -0,0 +1,3 @@ +# calcite-sort-dropdown + + diff --git a/packages/calcite-components/src/components/sort-dropdown/resources.ts b/packages/calcite-components/src/components/sort-dropdown/resources.ts new file mode 100644 index 00000000000..79d24c44151 --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/resources.ts @@ -0,0 +1,11 @@ +export const CSS = { + handle: "handle", +}; + +export const ICONS = { + drag: "drag", +} as const; + +export const SUBSTITUTIONS = { + itemLabel: "{itemLabel}", +}; diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.scss b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.scss new file mode 100644 index 00000000000..896dbdbe075 --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.scss @@ -0,0 +1,51 @@ +/** +* CSS Custom Properties +* +* These properties can be overridden using the component's tag as selector. +* +* @prop --calcite-handle-background-color: Specifies the component's background color. +* @prop --calcite-handle-background-color-hover: Specifies the component's background color on hover. +* @prop --calcite-handle-background-color-selected: Specifies the component's background color when selected. +* @prop --calcite-handle-icon-color: Specifies the component's icon color. +* @prop --calcite-handle-icon-color-hover: Specifies the component's icon color on hover. +* @prop --calcite-handle-icon-color-selected: Specifies the component's icon color when selected. +*/ + +// todo: css vars for action +:host { + @apply flex; +} + +.handle { + // @apply focus-base + // flex + // items-center + // justify-center + // self-stretch + // border-none; + + // color: var(--calcite-handle-icon-color, var(--calcite-color-border-input)); + // background-color: var(--calcite-handle-background-color, transparent); + // padding-block: theme("spacing.3"); + // padding-inline: theme("spacing.1"); + // line-height: 0; +} + +:host(:not([disabled])) .handle { + @apply cursor-move; // todo: not working + // &:hover { + // color: var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1)); + // background-color: var(--calcite-handle-background-color-hover, var(--calcite-color-foreground-2)); + // } + // &:focus { + // @apply focus-inset; + + // color: var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1)); + // } + // &--selected { + // color: var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1)); + // background-color: var(--calcite-handle-background-color-selected, var(--calcite-color-foreground-3)); + // } +} + +@include base-component(); diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.stories.ts b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.stories.ts new file mode 100644 index 00000000000..9128703a98e --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.stories.ts @@ -0,0 +1,11 @@ +import { html } from "../../../support/formatting"; + +export default { + title: "Components/SortDropdown", +}; + +export const simple = (): string => html` `; + +export const open = (): string => html` `; + +export const disabled = (): string => html` `; diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx new file mode 100644 index 00000000000..3c214ec09f1 --- /dev/null +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx @@ -0,0 +1,293 @@ +import { Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core"; +import { + componentFocusable, + LoadableComponent, + setComponentLoaded, + setUpLoadableComponent, +} from "../../utils/loadable"; +import { connectLocalized, disconnectLocalized } from "../../utils/locale"; +import { + connectMessages, + disconnectMessages, + setUpMessages, + T9nComponent, + updateMessages, +} from "../../utils/t9n"; +import { + InteractiveComponent, + InteractiveContainer, + updateHostInteraction, +} from "../../utils/interactive"; +import { Scale } from "../interfaces"; +import { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../components"; +import { defaultMenuPlacement } from "../../utils/floating-ui"; +import { SortDropdownMessages } from "./assets/sort-dropdown/t9n"; +import { CSS, ICONS, SUBSTITUTIONS } from "./resources"; + +@Component({ + tag: "calcite-sort-dropdown", + styleUrl: "sort-dropdown.scss", + shadow: true, + assetsDirs: ["assets"], +}) +export class SortDropdown implements LoadableComponent, T9nComponent, InteractiveComponent { + // -------------------------------------------------------------------------- + // + // Properties + // + // -------------------------------------------------------------------------- + + /** + * When `true`, interaction is prevented and the component is displayed with lower opacity. + */ + @Prop({ reflect: true }) disabled = false; + + /** + * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. + */ + @Prop() flipPlacements: FlipPlacement[]; + + /** + * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. + * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. + */ + @Prop({ reflect: true }) maxItems = 0; + + /** + * Determines the type of positioning to use for the overlaid content. + * + * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. + * + * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. + * + */ + @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute"; + + /** + * Determines where the component will be positioned relative to the container element. + * + * @default "bottom-start" + */ + @Prop({ reflect: true }) placement: MenuPlacement = defaultMenuPlacement; + + /** + * Made into a prop for testing purposes only. + * + * @internal + * @readonly + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messages: SortDropdownMessages; + + /** + * Specifies the label of the component. + */ + @Prop() label: string; + + /** + * Use this property to override individual strings used by the component. + */ + // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module + @Prop({ mutable: true }) messageOverrides: Partial; + + @Watch("messageOverrides") + onMessagesChange(): void { + /* wired up by t9n util */ + } + + /** + * When `true`, displays and positions the component. + */ + @Prop({ reflect: true, mutable: true }) open = false; + + /** Specifies the size of the component. */ + @Prop({ reflect: true }) scale: Scale = "m"; + + /** + * Specifies the width of the component. + */ + @Prop({ reflect: true }) widthScale: Scale; + + //-------------------------------------------------------------------------- + // + // Lifecycle + // + //-------------------------------------------------------------------------- + + connectedCallback(): void { + connectMessages(this); + connectLocalized(this); + } + + async componentWillLoad(): Promise { + setUpLoadableComponent(this); + await setUpMessages(this); + } + + componentDidLoad(): void { + setComponentLoaded(this); + } + + componentDidRender(): void { + updateHostInteraction(this); + } + + disconnectedCallback(): void { + disconnectMessages(this); + disconnectLocalized(this); + } + + // -------------------------------------------------------------------------- + // + // Private Properties + // + // -------------------------------------------------------------------------- + + @Element() el: HTMLCalciteSortDropdownElement; + + @State() effectiveLocale: string; + + @State() defaultMessages: SortDropdownMessages; + + @Watch("effectiveLocale") + effectiveLocaleChange(): void { + updateMessages(this, this.effectiveLocale); + } + + dropdownEl: HTMLCalciteDropdownElement; + // -------------------------------------------------------------------------- + // + // Methods + // + // -------------------------------------------------------------------------- + + /** Sets focus on the component. */ + @Method() + async setFocus(): Promise { + await componentFocusable(this); + this.dropdownEl?.setFocus(); + } + + // -------------------------------------------------------------------------- + // + // Private Methods + // + // -------------------------------------------------------------------------- + + private getLabel(): string { + const { label, messages } = this; + + if (!messages) { + return ""; + } + + if (!label) { + return messages.untitledLabel; + } + + return messages.label.replace(SUBSTITUTIONS.itemLabel, label); + } + + private handleOpen = (): void => { + this.open = true; + }; + + private handleClose = (): void => { + this.open = false; + }; + + private handleReorder = (): void => { + console.log(this.dropdownEl.selectedItems); + }; + + private handleMoveTo = (): void => { + console.log(this.dropdownEl.selectedItems); + }; + + // -------------------------------------------------------------------------- + // + // Render Methods + // + // -------------------------------------------------------------------------- + + render(): VNode { + const { + disabled, + flipPlacements, + messages, + open, + overlayPositioning, + placement, + scale, + widthScale, + } = this; + const text = this.getLabel(); + + return ( + + { + this.dropdownEl = el; + }} + scale={scale} + widthScale={widthScale} + > + + + + {messages.moveToTop} + + + {messages.moveUp} + + + {messages.moveDown} + + + {messages.moveToBottom} + + + + + List 2 + + + + + ); + } +} diff --git a/packages/calcite-components/src/demos/sort-dropdown.html b/packages/calcite-components/src/demos/sort-dropdown.html new file mode 100644 index 00000000000..a2fee2ac81e --- /dev/null +++ b/packages/calcite-components/src/demos/sort-dropdown.html @@ -0,0 +1,27 @@ + + + + + + + Calcite Components: calcite-sort-dropdown + + + + + + +
+
+

calcite-handle

+ + + +

sort-dropdown

+ + +
+
+ + + diff --git a/packages/calcite-components/src/index.html b/packages/calcite-components/src/index.html index fcc7c3da80b..021376c1c9d 100644 --- a/packages/calcite-components/src/index.html +++ b/packages/calcite-components/src/index.html @@ -426,116 +426,119 @@

Calcite demo

- +
+ + + + + -
- - - -
+ - +
+ + + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
- +
+ + + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
- +
+ + + +
- + -
- - - -
+ - +
+ + + +
- + -
- - - -
+
+ + + +
- +
+ + + +
- + + + diff --git a/t9nmanifest.txt b/t9nmanifest.txt index fd03b0b67fc..6416cf4af02 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -36,6 +36,7 @@ packages\calcite-components\src\components\popover\assets\popover\t9n packages\calcite-components\src\components\rating\assets\rating\t9n packages\calcite-components\src\components\scrim\assets\scrim\t9n packages\calcite-components\src\components\shell-panel\assets\shell-panel\t9n +packages\calcite-components\src\components\sort-dropdown\assets\sort-dropdown\t9n packages\calcite-components\src\components\stepper\assets\stepper\t9n packages\calcite-components\src\components\stepper-item\assets\stepper-item\t9n packages\calcite-components\src\components\tab-nav\assets\tab-nav\t9n From 265ad5a99bbad7b9219d54dfb51b740acfc10fab Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 16:51:03 -0700 Subject: [PATCH 02/11] WIP --- .../src/components/sort-dropdown/sort-dropdown.tsx | 14 +++++++++----- .../src/demos/sort-dropdown.html | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx index 3c214ec09f1..593b7977f2a 100644 --- a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx @@ -196,12 +196,12 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv this.open = false; }; - private handleReorder = (): void => { - console.log(this.dropdownEl.selectedItems); + private handleReorder = (event: CustomEvent): void => { + console.log((event.target as HTMLElement).dataset.value); }; - private handleMoveTo = (): void => { - console.log(this.dropdownEl.selectedItems); + private handleMoveTo = (event: CustomEvent): void => { + console.log((event.target as HTMLElement).dataset.value); }; // -------------------------------------------------------------------------- @@ -282,7 +282,11 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv - + List 2 diff --git a/packages/calcite-components/src/demos/sort-dropdown.html b/packages/calcite-components/src/demos/sort-dropdown.html index a2fee2ac81e..293687477da 100644 --- a/packages/calcite-components/src/demos/sort-dropdown.html +++ b/packages/calcite-components/src/demos/sort-dropdown.html @@ -6,7 +6,7 @@ Calcite Components: calcite-sort-dropdown - + From 8bee155ee62d2c1a21e189f7cca08b86b2fa15b9 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 17:06:59 -0700 Subject: [PATCH 03/11] WIP --- packages/calcite-components/src/components.d.ts | 16 ++++++++++++++++ .../components/sort-dropdown/sort-dropdown.tsx | 10 ++++++++++ 2 files changed, 26 insertions(+) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index c719d67e8ee..3d86aa7f483 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4800,6 +4800,14 @@ export namespace Components { * Sets focus on the component. */ "setFocus": () => Promise; + /** + * todo + */ + "setPosition": number; + /** + * todo + */ + "setSize": number; /** * Specifies the width of the component. */ @@ -13057,6 +13065,14 @@ declare namespace LocalJSX { * Specifies the size of the component. */ "scale"?: Scale; + /** + * todo + */ + "setPosition"?: number; + /** + * todo + */ + "setSize"?: number; /** * Specifies the width of the component. */ diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx index 593b7977f2a..454caee614a 100644 --- a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx @@ -103,6 +103,16 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv /** Specifies the size of the component. */ @Prop({ reflect: true }) scale: Scale = "m"; + /** + * todo + */ + @Prop() setPosition: number; + + /** + * todo + */ + @Prop() setSize: number; + /** * Specifies the width of the component. */ From 510e74f672d68ff1c67d1cd35840393857e57747 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 17:11:47 -0700 Subject: [PATCH 04/11] cleanup --- .../sort-dropdown/sort-dropdown.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx index 454caee614a..5f8caae98c7 100644 --- a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx @@ -207,10 +207,7 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv }; private handleReorder = (event: CustomEvent): void => { - console.log((event.target as HTMLElement).dataset.value); - }; - - private handleMoveTo = (event: CustomEvent): void => { + // todo: emit event console.log((event.target as HTMLElement).dataset.value); }; @@ -291,14 +288,13 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv {messages.moveToBottom} - - - List 2 - + From 7e81d90bd81ea323e147bfdd27d2e6e6decd55f6 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 11:13:50 -0700 Subject: [PATCH 05/11] WIP --- .../calcite-components/src/components.d.ts | 34 +++ .../assets/sort-dropdown/t9n/messages.json | 4 +- .../assets/sort-dropdown/t9n/messages_en.json | 4 +- .../src/components/sort-dropdown/resources.ts | 4 +- .../sort-dropdown/sort-dropdown.tsx | 212 +++++++++++++----- 5 files changed, 197 insertions(+), 61 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 3d86aa7f483..da2c2176864 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -81,6 +81,7 @@ import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; import { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; +import { MoveEventDetail, MoveToItem, ReorderEventDetail } from "./components/sort-dropdown/interfaces"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -178,6 +179,7 @@ export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; export { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; +export { MoveEventDetail, MoveToItem, ReorderEventDetail } from "./components/sort-dropdown/interfaces"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -4779,6 +4781,10 @@ export namespace Components { * @readonly */ "messages": SortDropdownMessages; + /** + * todo + */ + "moveToItems": MoveToItem[]; /** * When `true`, displays and positions the component. */ @@ -6277,6 +6283,10 @@ export interface CalciteSliderCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteSliderElement; } +export interface CalciteSortDropdownCustomEvent extends CustomEvent { + detail: T; + target: HTMLCalciteSortDropdownElement; +} export interface CalciteSortableListCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteSortableListElement; @@ -7659,7 +7669,19 @@ declare global { prototype: HTMLCalciteSliderElement; new (): HTMLCalciteSliderElement; }; + interface HTMLCalciteSortDropdownElementEventMap { + "calciteSortDropdownReorder": ReorderEventDetail; + "calciteSortDropdownMove": MoveEventDetail; + } interface HTMLCalciteSortDropdownElement extends Components.CalciteSortDropdown, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCalciteSortDropdownElement, ev: CalciteSortDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCalciteSortDropdownElement, ev: CalciteSortDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLCalciteSortDropdownElement: { prototype: HTMLCalciteSortDropdownElement; @@ -13048,6 +13070,18 @@ declare namespace LocalJSX { * @readonly */ "messages"?: SortDropdownMessages; + /** + * todo + */ + "moveToItems"?: MoveToItem[]; + /** + * todo + */ + "onCalciteSortDropdownMove"?: (event: CalciteSortDropdownCustomEvent) => void; + /** + * todo + */ + "onCalciteSortDropdownReorder"?: (event: CalciteSortDropdownCustomEvent) => void; /** * When `true`, displays and positions the component. */ diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json index 87ff952317b..9aa75ac68d5 100644 --- a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json +++ b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json @@ -5,6 +5,6 @@ "moveToBottom": "Move to bottom", "moveUp": "Move up", "moveDown": "Move down", - "label": "Reposition: {itemLabel}", - "untitledLabel": "Reposition" + "repositionLabel": "Reposition: {label}. Current position {position} of {total}.", + "reposition": "Reposition. Current position {position} of {total}." } diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json index 87ff952317b..9aa75ac68d5 100644 --- a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json +++ b/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json @@ -5,6 +5,6 @@ "moveToBottom": "Move to bottom", "moveUp": "Move up", "moveDown": "Move down", - "label": "Reposition: {itemLabel}", - "untitledLabel": "Reposition" + "repositionLabel": "Reposition: {label}. Current position {position} of {total}.", + "reposition": "Reposition. Current position {position} of {total}." } diff --git a/packages/calcite-components/src/components/sort-dropdown/resources.ts b/packages/calcite-components/src/components/sort-dropdown/resources.ts index 79d24c44151..12af52b3a4e 100644 --- a/packages/calcite-components/src/components/sort-dropdown/resources.ts +++ b/packages/calcite-components/src/components/sort-dropdown/resources.ts @@ -7,5 +7,7 @@ export const ICONS = { } as const; export const SUBSTITUTIONS = { - itemLabel: "{itemLabel}", + label: "{label}", + position: "{position}", + total: "{total}", }; diff --git a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx index 5f8caae98c7..6578c203d11 100644 --- a/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx +++ b/packages/calcite-components/src/components/sort-dropdown/sort-dropdown.tsx @@ -1,4 +1,15 @@ -import { Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core"; +import { + Event, + Component, + Element, + EventEmitter, + h, + Method, + Prop, + State, + VNode, + Watch, +} from "@stencil/core"; import { componentFocusable, LoadableComponent, @@ -23,6 +34,7 @@ import { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../componen import { defaultMenuPlacement } from "../../utils/floating-ui"; import { SortDropdownMessages } from "./assets/sort-dropdown/t9n"; import { CSS, ICONS, SUBSTITUTIONS } from "./resources"; +import { MoveEventDetail, MoveToItem, Reorder, ReorderEventDetail } from "./interfaces"; @Component({ tag: "calcite-sort-dropdown", @@ -95,6 +107,11 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv /* wired up by t9n util */ } + /** + * todo + */ + @Prop() moveToItems: MoveToItem[]; + /** * When `true`, displays and positions the component. */ @@ -155,16 +172,35 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv @Element() el: HTMLCalciteSortDropdownElement; - @State() effectiveLocale: string; - @State() defaultMessages: SortDropdownMessages; + @State() effectiveLocale: string; + @Watch("effectiveLocale") effectiveLocaleChange(): void { updateMessages(this, this.effectiveLocale); } dropdownEl: HTMLCalciteDropdownElement; + + // -------------------------------------------------------------------------- + // + // Events + // + // -------------------------------------------------------------------------- + + /** + * todo + * + */ + @Event({ cancelable: false }) calciteSortDropdownReorder: EventEmitter; + + /** + * todo + * + */ + @Event({ cancelable: false }) calciteSortDropdownMove: EventEmitter; + // -------------------------------------------------------------------------- // // Methods @@ -184,18 +220,23 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv // // -------------------------------------------------------------------------- + private setDropdownEl = (el: HTMLCalciteDropdownElement): void => { + this.dropdownEl = el; + }; + private getLabel(): string { - const { label, messages } = this; + const { label, messages, setPosition, setSize } = this; - if (!messages) { - return ""; - } + let formattedLabel = label + ? messages.repositionLabel.replace(SUBSTITUTIONS.label, label) + : messages.reposition; - if (!label) { - return messages.untitledLabel; - } + formattedLabel = formattedLabel.replace( + SUBSTITUTIONS.position, + setPosition ? setPosition.toString() : "", + ); - return messages.label.replace(SUBSTITUTIONS.itemLabel, label); + return formattedLabel.replace(SUBSTITUTIONS.total, setSize ? setSize.toString() : ""); } private handleOpen = (): void => { @@ -206,9 +247,14 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv this.open = false; }; - private handleReorder = (event: CustomEvent): void => { - // todo: emit event - console.log((event.target as HTMLElement).dataset.value); + private handleReorder = (event: Event): void => { + const order = (event.target as HTMLElement).dataset.value as Reorder; + this.calciteSortDropdownReorder.emit({ order }); + }; + + private handleMoveTo = (event: Event): void => { + const value = (event.target as HTMLElement).dataset.value; + this.calciteSortDropdownMove.emit({ value }); }; // -------------------------------------------------------------------------- @@ -226,23 +272,25 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv overlayPositioning, placement, scale, + setPosition, + setSize, widthScale, } = this; const text = this.getLabel(); + const isDisabled = disabled || !setPosition || !setSize; + return ( - + { - this.dropdownEl = el; - }} + ref={this.setDropdownEl} scale={scale} widthScale={widthScale} > @@ -250,7 +298,7 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv active={open} appearance="transparent" class={CSS.handle} - disabled={disabled} + disabled={isDisabled} icon={ICONS.drag} label={text} scale="s" @@ -259,45 +307,97 @@ export class SortDropdown implements LoadableComponent, T9nComponent, Interactiv title={text} /> - - {messages.moveToTop} - - - {messages.moveUp} - - - {messages.moveDown} - - - {messages.moveToBottom} - - - + {this.renderMoveToGroup()} ); } + + private renderMoveToItem(moveToItem: MoveToItem): VNode { + return ( + + {moveToItem.label} + + ); + } + + private renderMoveToGroup(): VNode { + const { messages, moveToItems, scale } = this; + + return moveToItems?.length ? ( + + {moveToItems.map((moveToItem) => this.renderMoveToItem(moveToItem))} + + ) : null; + } + + private renderTop(): VNode { + const { setPosition, messages } = this; + + return setPosition !== 1 && setPosition !== 2 ? ( + + {messages.moveToTop} + + ) : null; + } + + private renderUp(): VNode { + const { setPosition, messages } = this; + + return setPosition !== 1 ? ( + + {messages.moveUp} + + ) : null; + } + + private renderDown(): VNode { + const { setPosition, setSize, messages } = this; + + return setPosition !== setSize ? ( + + {messages.moveDown} + + ) : null; + } + + private renderBottom(): VNode { + const { setPosition, setSize, messages } = this; + + return setPosition !== setSize && setPosition !== setSize - 1 ? ( + + {messages.moveToBottom} + + ) : null; + } } From 039d3a167afd68250d1257c49e15651db9ee7e9c Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 11:15:07 -0700 Subject: [PATCH 06/11] wip --- .../src/demos/sort-dropdown.html | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/demos/sort-dropdown.html b/packages/calcite-components/src/demos/sort-dropdown.html index 293687477da..a0aff3cea7b 100644 --- a/packages/calcite-components/src/demos/sort-dropdown.html +++ b/packages/calcite-components/src/demos/sort-dropdown.html @@ -19,7 +19,20 @@

calcite-handle

sort-dropdown

- + + From 154c437e173e3d19eb4414457a5eaf77dc7c8495 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 11:16:01 -0700 Subject: [PATCH 07/11] wip --- packages/calcite-components/src/index.html | 196 +++++++++++---------- 1 file changed, 100 insertions(+), 96 deletions(-) diff --git a/packages/calcite-components/src/index.html b/packages/calcite-components/src/index.html index 021376c1c9d..009e674da37 100644 --- a/packages/calcite-components/src/index.html +++ b/packages/calcite-components/src/index.html @@ -426,119 +426,123 @@

Calcite demo

-
- - - - - + - + -
- - - -
+
+ + + +
-
- - - -
+ -
- - - -
+
+ + + +
-
- - - -
+
+ + + +
-
- - - -
+ -
- - - -
+
+ + + +
-
- - - -
+
+ + + +
-
- - - -
+
+ + + +
- + - + -
- - - -
+
+ + + +
- + -
- - - -
+ -
- - - -
+
+ + + +
- + - From e6bf7e2cd654a7ad490a0154e1c4a059955f056f Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 11:44:52 -0700 Subject: [PATCH 08/11] cleanup --- .../calcite-components/src/components.d.ts | 163 ------------------ 1 file changed, 163 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index da2c2176864..bfa5b3f2fc8 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -79,9 +79,6 @@ import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; -import { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; -import { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; -import { MoveEventDetail, MoveToItem, ReorderEventDetail } from "./components/sort-dropdown/interfaces"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -177,9 +174,6 @@ export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; -export { FlipPlacement as FlipPlacement1, MenuPlacement as MenuPlacement1, OverlayPositioning as OverlayPositioning1 } from "./components"; -export { SortDropdownMessages } from "./components/sort-dropdown/assets/sort-dropdown/t9n"; -export { MoveEventDetail, MoveToItem, ReorderEventDetail } from "./components/sort-dropdown/interfaces"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; @@ -4755,70 +4749,6 @@ export namespace Components { */ "value": null | number | number[]; } - interface CalciteSortDropdown { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - "disabled": boolean; - /** - * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements": FlipPlacement1[]; - /** - * Specifies the label of the component. - */ - "label": string; - /** - * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. - */ - "maxItems": number; - /** - * Use this property to override individual strings used by the component. - */ - "messageOverrides": Partial; - /** - * Made into a prop for testing purposes only. - * @readonly - */ - "messages": SortDropdownMessages; - /** - * todo - */ - "moveToItems": MoveToItem[]; - /** - * When `true`, displays and positions the component. - */ - "open": boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - "overlayPositioning": OverlayPositioning1; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-start" - */ - "placement": MenuPlacement1; - /** - * Specifies the size of the component. - */ - "scale": Scale; - /** - * Sets focus on the component. - */ - "setFocus": () => Promise; - /** - * todo - */ - "setPosition": number; - /** - * todo - */ - "setSize": number; - /** - * Specifies the width of the component. - */ - "widthScale": Scale; - } interface CalciteSortableList { /** * When provided, the method will be called to determine whether the element can move from the list. @@ -6283,10 +6213,6 @@ export interface CalciteSliderCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteSliderElement; } -export interface CalciteSortDropdownCustomEvent extends CustomEvent { - detail: T; - target: HTMLCalciteSortDropdownElement; -} export interface CalciteSortableListCustomEvent extends CustomEvent { detail: T; target: HTMLCalciteSortableListElement; @@ -7669,24 +7595,6 @@ declare global { prototype: HTMLCalciteSliderElement; new (): HTMLCalciteSliderElement; }; - interface HTMLCalciteSortDropdownElementEventMap { - "calciteSortDropdownReorder": ReorderEventDetail; - "calciteSortDropdownMove": MoveEventDetail; - } - interface HTMLCalciteSortDropdownElement extends Components.CalciteSortDropdown, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLCalciteSortDropdownElement, ev: CalciteSortDropdownCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLCalciteSortDropdownElement, ev: CalciteSortDropdownCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; - } - var HTMLCalciteSortDropdownElement: { - prototype: HTMLCalciteSortDropdownElement; - new (): HTMLCalciteSortDropdownElement; - }; interface HTMLCalciteSortableListElementEventMap { "calciteListOrderChange": void; } @@ -8225,7 +8133,6 @@ declare global { "calcite-shell-center-row": HTMLCalciteShellCenterRowElement; "calcite-shell-panel": HTMLCalciteShellPanelElement; "calcite-slider": HTMLCalciteSliderElement; - "calcite-sort-dropdown": HTMLCalciteSortDropdownElement; "calcite-sortable-list": HTMLCalciteSortableListElement; "calcite-split-button": HTMLCalciteSplitButtonElement; "calcite-stack": HTMLCalciteStackElement; @@ -13044,74 +12951,6 @@ declare namespace LocalJSX { */ "value"?: null | number | number[]; } - interface CalciteSortDropdown { - /** - * When `true`, interaction is prevented and the component is displayed with lower opacity. - */ - "disabled"?: boolean; - /** - * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. - */ - "flipPlacements"?: FlipPlacement1[]; - /** - * Specifies the label of the component. - */ - "label"?: string; - /** - * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`. - */ - "maxItems"?: number; - /** - * Use this property to override individual strings used by the component. - */ - "messageOverrides"?: Partial; - /** - * Made into a prop for testing purposes only. - * @readonly - */ - "messages"?: SortDropdownMessages; - /** - * todo - */ - "moveToItems"?: MoveToItem[]; - /** - * todo - */ - "onCalciteSortDropdownMove"?: (event: CalciteSortDropdownCustomEvent) => void; - /** - * todo - */ - "onCalciteSortDropdownReorder"?: (event: CalciteSortDropdownCustomEvent) => void; - /** - * When `true`, displays and positions the component. - */ - "open"?: boolean; - /** - * Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. - */ - "overlayPositioning"?: OverlayPositioning1; - /** - * Determines where the component will be positioned relative to the container element. - * @default "bottom-start" - */ - "placement"?: MenuPlacement1; - /** - * Specifies the size of the component. - */ - "scale"?: Scale; - /** - * todo - */ - "setPosition"?: number; - /** - * todo - */ - "setSize"?: number; - /** - * Specifies the width of the component. - */ - "widthScale"?: Scale; - } interface CalciteSortableList { /** * When provided, the method will be called to determine whether the element can move from the list. @@ -14460,7 +14299,6 @@ declare namespace LocalJSX { "calcite-shell-center-row": CalciteShellCenterRow; "calcite-shell-panel": CalciteShellPanel; "calcite-slider": CalciteSlider; - "calcite-sort-dropdown": CalciteSortDropdown; "calcite-sortable-list": CalciteSortableList; "calcite-split-button": CalciteSplitButton; "calcite-stack": CalciteStack; @@ -14593,7 +14431,6 @@ declare module "@stencil/core" { "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes; "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes; "calcite-slider": LocalJSX.CalciteSlider & JSXBase.HTMLAttributes; - "calcite-sort-dropdown": LocalJSX.CalciteSortDropdown & JSXBase.HTMLAttributes; "calcite-sortable-list": LocalJSX.CalciteSortableList & JSXBase.HTMLAttributes; "calcite-split-button": LocalJSX.CalciteSplitButton & JSXBase.HTMLAttributes; "calcite-stack": LocalJSX.CalciteStack & JSXBase.HTMLAttributes; From 1e10b08ce9e751dcdab96870e87008d5d8fd2c46 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 12:44:35 -0700 Subject: [PATCH 09/11] rename files --- .../assets/sort-handle}/t9n/messages.json | 0 .../assets/sort-handle}/t9n/messages_en.json | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/calcite-components/src/components/{sort-dropdown/assets/sort-dropdown => sort-handle/assets/sort-handle}/t9n/messages.json (100%) rename packages/calcite-components/src/components/{sort-dropdown/assets/sort-dropdown => sort-handle/assets/sort-handle}/t9n/messages_en.json (100%) diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json b/packages/calcite-components/src/components/sort-handle/assets/sort-handle/t9n/messages.json similarity index 100% rename from packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages.json rename to packages/calcite-components/src/components/sort-handle/assets/sort-handle/t9n/messages.json diff --git a/packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json b/packages/calcite-components/src/components/sort-handle/assets/sort-handle/t9n/messages_en.json similarity index 100% rename from packages/calcite-components/src/components/sort-dropdown/assets/sort-dropdown/t9n/messages_en.json rename to packages/calcite-components/src/components/sort-handle/assets/sort-handle/t9n/messages_en.json From abf2b7e1f0eb9d9cf37e77a9bd09b159b578cc42 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 12:45:26 -0700 Subject: [PATCH 10/11] rename files --- t9nmanifest.txt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/t9nmanifest.txt b/t9nmanifest.txt index 6416cf4af02..ed2e90f11b0 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -36,7 +36,7 @@ packages\calcite-components\src\components\popover\assets\popover\t9n packages\calcite-components\src\components\rating\assets\rating\t9n packages\calcite-components\src\components\scrim\assets\scrim\t9n packages\calcite-components\src\components\shell-panel\assets\shell-panel\t9n -packages\calcite-components\src\components\sort-dropdown\assets\sort-dropdown\t9n +packages\calcite-components\src\components\sort-handle\assets\sort-handle\t9n packages\calcite-components\src\components\stepper\assets\stepper\t9n packages\calcite-components\src\components\stepper-item\assets\stepper-item\t9n packages\calcite-components\src\components\tab-nav\assets\tab-nav\t9n @@ -48,4 +48,4 @@ packages\calcite-components\src\components\text-area\assets\text-area\t9n packages\calcite-components\src\components\time-picker\assets\time-picker\t9n packages\calcite-components\src\components\tip\assets\tip\t9n packages\calcite-components\src\components\tip-manager\assets\tip-manager\t9n -packages\calcite-components\src\components\value-list\assets\value-list\t9n \ No newline at end of file +packages\calcite-components\src\components\value-list\assets\value-list\t9n From 69a1e1ac842220681885430184e1db411a1e5b1e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Wed, 2 Oct 2024 12:54:37 -0700 Subject: [PATCH 11/11] cleanup --- t9nmanifest.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/t9nmanifest.txt b/t9nmanifest.txt index ed2e90f11b0..4cf7b9f185c 100644 --- a/t9nmanifest.txt +++ b/t9nmanifest.txt @@ -48,4 +48,4 @@ packages\calcite-components\src\components\text-area\assets\text-area\t9n packages\calcite-components\src\components\time-picker\assets\time-picker\t9n packages\calcite-components\src\components\tip\assets\tip\t9n packages\calcite-components\src\components\tip-manager\assets\tip-manager\t9n -packages\calcite-components\src\components\value-list\assets\value-list\t9n +packages\calcite-components\src\components\value-list\assets\value-list\t9n \ No newline at end of file