npm - @esri/calcite-components - Versions diffs - 1.0.0-next.597 → 1.0.0-next.598 - Mend

@esri/calcite-components 1.0.0-next.597 → 1.0.0-next.598

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (893) hide show

package/dist/collection/components/combobox/combobox.stories.js ADDED Viewed

@@ -0,0 +1,387 @@
+import { select, number, text } from "@storybook/addon-knobs";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
+import { themesDarkDefault } from "../../../.storybook/utils";
+import readme1 from "./readme.md";
+import readme2 from "../combobox-item/readme.md";
+import { html } from "../../../support/formatting";
+export default {
+    title: "Components/Controls/Combobox",
+    parameters: {
+        notes: [readme1, readme2]
+    },
+    ...storyFilters()
+};
+export const simple = () => html `
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox
+      label="demo combobox"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item value="Trees" text-label="Trees" selected>
+        <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+        <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals">
+        <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+export const single = () => html `
+  <div style="width:150px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox
+      label="demo combobox"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "single")}"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item icon="altitude" value="altitude" text-label="Altitude" selected></calcite-combobox-item>
+      <calcite-combobox-item icon="article" value="article" text-label="Article"></calcite-combobox-item>
+      <calcite-combobox-item icon="attachment" value="attachment" text-label="Attachment"></calcite-combobox-item>
+      <calcite-combobox-item icon="banana" value="banana" text-label="Banana"></calcite-combobox-item>
+      <calcite-combobox-item icon="battery3" value="battery" text-label="Batterycharging"></calcite-combobox-item>
+      <calcite-combobox-item icon="beaker" value="beaker" text-label="Beaker"></calcite-combobox-item>
+      <calcite-combobox-item icon="bell" value="bell" text-label="Bell"></calcite-combobox-item>
+      <calcite-combobox-item icon="bookmark" value="bookmark" text-label="Bookmark"></calcite-combobox-item>
+      <calcite-combobox-item icon="brightness" value="brightness" text-label="Brightness"></calcite-combobox-item>
+      <calcite-combobox-item icon="calendar" value="calendar" text-label="Calendar"></calcite-combobox-item>
+      <calcite-combobox-item icon="camera" value="camera" text-label="Camera"></calcite-combobox-item>
+      <calcite-combobox-item icon="car" value="car" text-label="Car"></calcite-combobox-item>
+      <calcite-combobox-item icon="clock" value="clock" text-label="Clock"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+export const multiple = () => html `
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox
+      label="demo combobox"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item value="Trees" text-label="Trees" selected></calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers" selected></calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals"></calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+      <calcite-combobox-item
+        value="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+        text-label="CommercialDamageAssessment - Damage to Commercial Buildings & Damage to Commercial Buildings"
+        selected
+      ></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+export const nestedItems = () => html `
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox
+      open
+      label="demo combobox"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item value="ITEM-0-0" text-label="Level 1">
+        <calcite-combobox-item value="ITEM-0-1" text-label="Level 2"></calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-0-2" text-label="Level 2"></calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-0-3" text-label="Level 2"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="ITEM-1-0" text-label="Level 1">
+        <calcite-combobox-item value="ITEM-1-1" text-label="Level 2">
+          <calcite-combobox-item value="ITEM-1-1-0" text-label="Level 3"></calcite-combobox-item>
+          <calcite-combobox-item value="ITEM-1-1-1" text-label="Level 3">
+            <calcite-combobox-item value="ITEM-1-1-1-0" text-label="Level 4"></calcite-combobox-item>
+            <calcite-combobox-item value="ITEM-1-1-1-1" text-label="Level 4"></calcite-combobox-item>
+          </calcite-combobox-item>
+        </calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-1-2" text-label="Level 2"></calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-1-3" text-label="Level 2"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="ITEM-2-0" text-label="Level 1">
+        <calcite-combobox-item value="ITEM-2-1" text-label="Level 2"></calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-2-2" text-label="Level 2">
+          <calcite-combobox-item value="ITEM-2-2-0" text-label="Level 3"></calcite-combobox-item>
+        </calcite-combobox-item>
+        <calcite-combobox-item value="ITEM-2-3" text-label="Level 2"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="ITEM-0-4" text-label="Level 1"></calcite-combobox-item>
+      <calcite-combobox-item value="ITEM-0-5" text-label="Level 1"></calcite-combobox-item>
+      <calcite-combobox-item value="ITEM-0-6" text-label="Level 1"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+export const disabled_TestOnly = () => html `<calcite-combobox disabled>
+  <calcite-combobox-item value="Trees" text-label="Trees">
+    <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+    <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+    <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+  </calcite-combobox-item>
+  <calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
+    <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+    <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+    <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+  </calcite-combobox-item>
+</calcite-combobox>`;
+export const flipPlacements_TestOnly = () => html `
+  <style>
+    .my-combobox {
+      position: unset;
+      margin-top: 50px;
+    }
+  </style>
+  <div style="height: 100px; overflow:scroll;">
+    <calcite-combobox class="my-combobox" placeholder="placeholder" open>
+      <calcite-combobox-item value="Trees" text-label="Trees" aria-hidden="true">
+        <calcite-combobox-item value="Pine" text-label="Pine" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item
+          value="Sequoia"
+          disabled=""
+          text-label="Sequoia"
+          aria-hidden="true"
+        ></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers" aria-hidden="true">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item
+          value="Black Eyed Susan"
+          text-label="Black Eyed Susan"
+          aria-hidden="true"
+        ></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals" aria-hidden="true">
+        <calcite-combobox-item value="Birds" text-label="Birds" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks" aria-hidden="true"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects" aria-hidden="true"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers" aria-hidden="true"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+  <script>
+    document.querySelector(".my-combobox").flipPlacements = ["right"];
+  </script>
+`;
+export const flipPositioning_TestOnly = () => html `
+  <div style="position: absolute; bottom: 10px; left: 10px;">
+    <calcite-combobox
+      max-items="${number("max-items", 6)}"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      open
+    >
+      <calcite-combobox-item value="Trees" text-label="Trees">
+        <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+        <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals">
+        <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+flipPositioning_TestOnly.parameters = {
+    layout: "fullscreen"
+};
+export const darkThemeRTL_TestOnly = () => html `
+  <div style="width:400px;max-width:100%;padding:100px">
+    <calcite-combobox
+      label="demo combobox"
+      selection-mode="${select("selection-mode", ["multi", "single", "ancestors"], "multi")}"
+      class="calcite-theme-dark"
+      placeholder="${text("placeholder", "placeholder")}"
+      label="${text("label (for screen readers)", "demo")}"
+      scale="${select("scale", ["s", "m", "l"], "m")}"
+      ${boolean("disabled", false)}
+      ${boolean("allow-custom-values", false)}
+      max-items="${number("max-items", 0)}"
+    >
+      <calcite-combobox-item value="Trees" text-label="Trees">
+        <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+        <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals">
+        <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+export const singleLongLabel_TestOnly = () => html `
+  <calcite-combobox open selection-mode="single" allow-custom-values>
+    <calcite-combobox-item value="Trees" text-label="Trees">
+      <calcite-combobox-item
+        value="CommercialDamageAssessment - Damage to Commercial Buildings"
+        text-label="CommercialDamageAssessment - Damage to Commercial Buildings &  Damage to Residential Buildings "
+      ></calcite-combobox-item>
+      <calcite-combobox-item value="Sequoia" text-label="Sequoia"></calcite-combobox-item>
+      <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+    </calcite-combobox-item>
+    <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+  </calcite-combobox>
+`;
+export const withPlaceholderIcon_TestOnly = () => html ` <calcite-combobox
+  id="labelFour"
+  label="test"
+  placeholder="${text("placeholder", "select folder")}"
+  placeholder-icon="${text("placeholder-icon", "select")}"
+  max-items="6"
+  selection-mode="single"
+  scale="s"
+>
+  <calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
+  <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
+  <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
+</calcite-combobox>`;
+export const withoutPlaceholderIcon_TestOnly = () => html ` <div
+  style="width:400px;max-width:100%;background-color:white;padding:100px"
+>
+  <calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multi" open>
+    <calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
+    <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
+    <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
+  </calcite-combobox>
+</div>`;
+export const scrollingWithoutMaxItems_TestOnly = () => html `
+  <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox label="demo combobox" open>
+      <calcite-combobox-item value="Trees" text-label="Trees" selected>
+        <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+        <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals">
+        <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+      <calcite-combobox-item value="Trees" text-label="Trees" selected>
+        <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+        <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+        <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals">
+        <calcite-combobox-item value="Birds" text-label="Birds"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;
+export const optionListMinWidthMatchesInputWhenOverlayPositioningIsFixed_TestOnly = () => html `
+  <style>
+    .wrapper {
+      display: flex;
+      width: 100%;
+    }
+    calcite-combobox {
+      width: 400px;
+      margin: 0 auto;
+    }
+  </style>
+  <div class="wrapper">
+    <calcite-combobox placeholder="placeholder" overlay-positioning="fixed" placement="bottom" open>
+      <calcite-combobox-item value="Trees" text-label="Trees" aria-hidden="true">
+        <calcite-combobox-item value="Pine" text-label="Pine" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item
+          value="Sequoia"
+          disabled=""
+          text-label="Sequoia"
+          aria-hidden="true"
+        ></calcite-combobox-item>
+        <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Flowers" text-label="Flowers" aria-hidden="true">
+        <calcite-combobox-item value="Daffodil" text-label="Daffodil" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item
+          value="Black Eyed Susan"
+          text-label="Black Eyed Susan"
+          aria-hidden="true"
+        ></calcite-combobox-item>
+        <calcite-combobox-item value="Nasturtium" text-label="Nasturtium" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Animals" text-label="Animals" aria-hidden="true">
+        <calcite-combobox-item value="Birds" text-label="Birds" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item value="Reptiles" text-label="Reptiles" aria-hidden="true"></calcite-combobox-item>
+        <calcite-combobox-item value="Amphibians" text-label="Amphibians" aria-hidden="true"></calcite-combobox-item>
+      </calcite-combobox-item>
+      <calcite-combobox-item value="Rocks" text-label="Rocks" aria-hidden="true"></calcite-combobox-item>
+      <calcite-combobox-item value="Insects" text-label="Insects" aria-hidden="true"></calcite-combobox-item>
+      <calcite-combobox-item value="Rivers" text-label="Rivers" aria-hidden="true"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>
+`;

package/dist/collection/components/combobox/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { Host, h } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";

package/dist/collection/components/combobox-item/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "./utils";

package/dist/collection/components/date-picker/resources.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

package/dist/collection/components/date-picker/utils.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { Host, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/date-picker-month/date-picker-month.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { Host, h } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

package/dist/collection/components/date-picker-month-header/date-picker-month-header.css CHANGED Viewed

@@ -185,7 +185,7 @@
 .year {
   position: relative;
-  inline-size: 3rem;
+  inline-size: 2.5rem;
   border-style: none;
   background-color: transparent;
   text-align: center;
@@ -205,7 +205,6 @@
 }
 .year--suffix {
-  inline-size: 4rem;
   text-align: start;
 }
@@ -214,14 +213,8 @@
 }
 .suffix {
-  position: absolute;
   inset-block-start: 0px;
-  inline-size: 4rem;
   white-space: nowrap;
   text-align: start;
   inset-inline-start: 0;
-}
-.suffix__invisible {
-  visibility: hidden;
 }

package/dist/collection/components/date-picker-month-header/date-picker-month-header.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
@@ -93,7 +93,7 @@ export class DatePickerMonthHeader {
     const activeMonth = this.activeDate.getMonth();
     const { months, unitOrder } = this.localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
-    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear().toString());
+    const localizedYear = this.formatCalendarYear(this.activeDate.getFullYear());
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
@@ -101,7 +101,7 @@ export class DatePickerMonthHeader {
     return (h(Fragment, null, h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })), h("div", { class: { text: true, "text--reverse": reverse } }, h(Heading, { class: "month", level: this.headingLevel }, localizedMonth), h("span", { class: "year-wrap" }, h("input", { "aria-label": this.intlYear, class: {
         year: true,
         "year--suffix": !!suffix
-      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && (h("span", { class: "suffix" }, h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear), " " + suffix)))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && h("span", { class: "suffix" }, suffix))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -114,7 +114,7 @@ export class DatePickerMonthHeader {
     const { localeData } = this;
     const buddhistCalendar = localeData["default-calendar"] === "buddhist";
     const yearOffset = buddhistCalendar ? BUDDHIST_CALENDAR_YEAR_OFFSET : 0;
-    return localizeNumber(parseNumber(year, localeData) + yearOffset, localeData);
+    return localizeNumber(year + yearOffset, localeData);
   }
   parseCalendarYear(year) {
     const { localeData } = this;
@@ -152,7 +152,7 @@ export class DatePickerMonthHeader {
       this.calciteDatePickerSelect.emit(inRangeDate);
     }
     if (commit) {
-      yearInput.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear().toString());
+      yearInput.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear());
     }
   }
   static get is() { return "calcite-date-picker-month-header"; }

package/dist/collection/components/date-picker-month-header/resources.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.597
+ * v1.0.0-next.598
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";