npm - @charcoal-ui/react - Versions diffs - 4.3.0 → 4.4.1 - Mend

@charcoal-ui/react 4.3.0 → 4.4.1

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

Files changed (40) hide show

package/dist/components/MultiSelect/context.d.ts +14 -0
package/dist/components/MultiSelect/context.d.ts.map +1 -0
package/dist/components/MultiSelect/index.d.ts +38 -0
package/dist/components/MultiSelect/index.d.ts.map +1 -0
package/dist/index.cjs.js +318 -216
package/dist/index.cjs.js.map +1 -1
package/dist/index.css +111 -0
package/dist/index.css.map +1 -1
package/dist/index.d.ts +1 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.esm.js +281 -181
package/dist/index.esm.js.map +1 -1
package/dist/layered.css +111 -0
package/dist/layered.css.map +1 -1
package/package.json +6 -7
package/src/components/Button/__snapshots__/index.story.storyshot +89 -71
package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +50 -53
package/src/components/Checkbox/__snapshots__/index.story.storyshot +108 -102
package/src/components/Clickable/__snapshots__/index.story.storyshot +19 -17
package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +45 -54
package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +238 -275
package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +28 -50
package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +780 -1158
package/src/components/Icon/__snapshots__/index.story.storyshot +9 -7
package/src/components/IconButton/__snapshots__/index.story.storyshot +43 -37
package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +52 -64
package/src/components/Modal/__snapshots__/index.story.storyshot +568 -716
package/src/components/MultiSelect/__snapshots__/index.story.storyshot +531 -0
package/src/components/MultiSelect/context.ts +23 -0
package/src/components/MultiSelect/index.css +139 -0
package/src/components/MultiSelect/index.story.tsx +118 -0
package/src/components/MultiSelect/index.test.tsx +255 -0
package/src/components/MultiSelect/index.tsx +153 -0
package/src/components/Radio/__snapshots__/index.story.storyshot +313 -367
package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +116 -228
package/src/components/Switch/__snapshots__/index.story.storyshot +74 -73
package/src/components/TagItem/__snapshots__/index.story.storyshot +177 -193
package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +372 -533
package/src/components/TextField/__snapshots__/TextField.story.storyshot +444 -583
package/src/index.ts +6 -0

package/src/components/MultiSelect/__snapshots__/index.story.storyshot ADDED Viewed

@@ -0,0 +1,531 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Storybook Tests > react/MultiSelect > Basic 1`] = `
+<div>
+  <div
+    data-dark="false"
+  >
+    <div
+      aria-label="label"
+      data-testid="SelectGroup"
+      style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+    >
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          checked=""
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢1"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢1
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢2"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢2
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          checked=""
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢3"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢3
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢4"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢4
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+exports[`Storybook Tests > react/MultiSelect > Invalid 1`] = `
+<div>
+  <div
+    data-dark="false"
+  >
+    <div
+      aria-label="label"
+      data-testid="SelectGroup"
+      style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+    >
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="true"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢1"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="true"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢1
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="true"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢2"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="true"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢2
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="true"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢3"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="true"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢3
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="true"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name="name"
+          type="checkbox"
+          value="選択肢4"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="true"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢4
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+exports[`Storybook Tests > react/MultiSelect > Overlay 1`] = `
+<div>
+  <div
+    data-dark="false"
+  >
+    <div
+      aria-label="label"
+      data-testid="SelectGroup"
+      style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+    >
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="true"
+          name="name"
+          type="checkbox"
+          value="選択肢1"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="true"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢1
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="true"
+          name="name"
+          type="checkbox"
+          value="選択肢2"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="true"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢2
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="true"
+          name="name"
+          type="checkbox"
+          value="選択肢3"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="true"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢3
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="true"
+          name="name"
+          type="checkbox"
+          value="選択肢4"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="true"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢4
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
+exports[`Storybook Tests > react/MultiSelect > Playground 1`] = `
+<div>
+  <div
+    data-dark="false"
+  >
+    <div
+      aria-label=""
+      data-testid="SelectGroup"
+      style="display: grid; grid-template-columns: 1fr; gap: 8px;"
+    >
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name=""
+          type="checkbox"
+          value="選択肢1"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢
+          1
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name=""
+          type="checkbox"
+          value="選択肢2"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢
+          2
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name=""
+          type="checkbox"
+          value="選択肢3"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢
+          3
+        </div>
+      </label>
+      <label
+        aria-disabled="false"
+        class="charcoal-multi-select"
+      >
+        <input
+          aria-invalid="false"
+          class="charcoal-multi-select-input"
+          data-overlay="false"
+          name=""
+          type="checkbox"
+          value="選択肢4"
+        />
+        <div
+          aria-hidden="true"
+          aria-invalid="false"
+          class="charcoal-multi-select-overlay"
+          data-overlay="false"
+        >
+          <pixiv-icon
+            name="24/Check"
+            unsafe-non-guideline-scale="0.6666666666666666"
+          />
+        </div>
+        <div
+          class="charcoal-multi-select-label"
+        >
+          選択肢
+          4
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;

package/src/components/MultiSelect/context.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { createContext } from 'react'
+type MultiSelectGroupContext = {
+  name: string
+  selected: string[]
+  disabled: boolean
+  readonly: boolean
+  invalid: boolean
+  onChange: ({ value, selected }: { value: string; selected: boolean }) => void
+}
+export const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({
+  name: undefined as never,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  invalid: false,
+  onChange() {
+    throw new Error(
+      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'
+    )
+  },
+})

package/src/components/MultiSelect/index.css ADDED Viewed

@@ -0,0 +1,139 @@
+.charcoal-multi-select {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+.charcoal-multi-select:disabled,
+.charcoal-multi-select[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+.charcoal-multi-select-label {
+  display: flow-root;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+}
+.charcoal-multi-select-label::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+.charcoal-multi-select-label::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+.charcoal-multi-select-input[type='checkbox'] {
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  transition: 0.2s background-color, 0.2s box-shadow;
+}
+.charcoal-multi-select-input[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+.charcoal-multi-select-input[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-multi-select-input[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+}
+.charcoal-multi-select-input[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.charcoal-multi-select-input[type='checkbox']:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-hover);
+}
+.charcoal-multi-select-input[type='checkbox']:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:active[aria-disabled='false'] {
+  background-color: var(--charcoal-text3-press);
+}
+.charcoal-multi-select-input[type='checkbox']:checked:hover:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:checked:hover[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-hover);
+}
+.charcoal-multi-select-input[type='checkbox']:checked:active:not(:disabled):not(
+    [aria-disabled]
+  ),
+.charcoal-multi-select-input[type='checkbox']:checked:active[aria-disabled='false'] {
+  background-color: var(--charcoal-brand-press);
+}
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false']:not(
+    :disabled
+  ):not([aria-disabled]) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+.charcoal-multi-select-input[aria-invalid='true'][data-overlay='false'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+.charcoal-multi-select-input[data-overlay='true'] {
+  background-color: var(--charcoal-surface4);
+}
+.charcoal-multi-select-overlay {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  transition: 0.2s box-shadow;
+}
+.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true']:not(
+    :disabled
+  ):not([aria-disabled]) {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+.charcoal-multi-select-overlay[aria-invalid='true'][data-overlay='true'][aria-disabled='false'] {
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+}
+.charcoal-multi-select-overlay[data-overlay='true'] {
+  border-color: var(--charcoal-text5);
+  border-width: 2px;
+  border-style: solid;
+}