diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 3afee9f6..00000000 --- a/.babelrc +++ /dev/null @@ -1,30 +0,0 @@ -{ - "plugins": [ - "@emotion", - [ - "@babel/plugin-proposal-class-properties", - { - "loose": true - } - ], - [ - "transform-react-remove-prop-types", - { - "mode": "remove", - "ignoreFilenames": [ - "node_modules" - ] - } - ] - ], - "presets": [ - "minify", - [ - "@babel/preset-env", - { - "loose": true - } - ], - "@babel/preset-react" - ] -} diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 36b57207..3a44de55 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -1,5 +1,5 @@ { - "node": "16", + "node": "20", "buildCommand": "build", "sandboxes": ["react-dropdown-select-nzto7"] } diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 33cec331..fe62bc5e 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -15,7 +15,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 18 + node-version: 20 - run: npm ci - run: npm test --maxWorkers=2 --maxConcurrent=2 diff --git a/.github/workflows/on-pull-request.yml b/.github/workflows/on-pull-request.yml index 5389e169..f821ad6c 100644 --- a/.github/workflows/on-pull-request.yml +++ b/.github/workflows/on-pull-request.yml @@ -15,6 +15,6 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: - node-version: 16 + node-version: 20 - run: npm ci - run: npm test --maxWorkers=2 --maxConcurrent=2 diff --git a/.nvmrc b/.nvmrc index 07c142ff..209e3ef4 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.13.1 +20 diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 1558d159..00000000 --- a/.travis.yml +++ /dev/null @@ -1,35 +0,0 @@ -sudo: false -language: node_js - -node_js: - - '16' - -branches: - only: - - master - -cache: - directories: - - node_modules - -before_install: - - npm update - -install: - - npm ci - -script: - - npm test - - npm run coveralls - - cd docs && npm ci && npm run build && cd - - -deploy: - - provider: pages - skip-cleanup: true - github-token: $GH_TOKEN - keep-history: true - local-dir: docs/public - target-branch: gh-pages - repo: sanusart/react-dropdown-select - on: - branch: master diff --git a/__tests__/__snapshots__/index.spec.js.snap b/__tests__/__snapshots__/index.spec.js.snap index bf6e6eb2..bcb663b8 100644 --- a/__tests__/__snapshots__/index.spec.js.snap +++ b/__tests__/__snapshots__/index.spec.js.snap @@ -2,50 +2,6 @@ exports[` is disabled 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - cursor: not-allowed; - pointer-events: none; - opacity: 0.3; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -56,145 +12,72 @@ exports[` is disabled 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-6 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); cursor: pointer; } -.emotion-6 svg { - width: 16px; - height: 16px; -} - -.emotion-6:hover path { - stroke: #0074D9; -} - -.emotion-6:focus { +.emotion-1:focus { outline: none; } -.emotion-6:focus path { - stroke: #0074D9; -} -
-
- - - -
`; exports[` renders correctly 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -205,145 +88,71 @@ exports[` renders correctly 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-6 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); cursor: pointer; } -.emotion-6 svg { - width: 16px; - height: 16px; -} - -.emotion-6:hover path { - stroke: #0074D9; -} - -.emotion-6:focus { +.emotion-1:focus { outline: none; } -.emotion-6:focus path { - stroke: #0074D9; -} -
-
- - - -
`; exports[` renders with clearable 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -354,167 +163,93 @@ exports[` renders with clearable 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; + cursor: pointer; } -.emotion-4:focus { +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-2 { line-height: 25px; margin: 0 10px; cursor: pointer; } -.emotion-6:focus { +.emotion-2:focus { outline: none; } -.emotion-6:hover { +.emotion-2:hover { color: tomato; } -.emotion-8 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - cursor: pointer; -} - -.emotion-8 svg { - width: 16px; - height: 16px; -} - -.emotion-8:hover path { - stroke: #0074D9; -} - -.emotion-8:focus { - outline: none; -} - -.emotion-8:focus path { - stroke: #0074D9; -} -
×
-
- - - -
`; exports[` renders with custom search function 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -525,7 +260,7 @@ exports[` renders with custom search function 1`] = flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; @@ -533,137 +268,63 @@ exports[` renders with custom search function 1`] = padding: 0; width: calc(3ch + 5px); font-size: smaller; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-6 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); cursor: pointer; } -.emotion-6 svg { - width: 16px; - height: 16px; -} - -.emotion-6:hover path { - stroke: #0074D9; -} - -.emotion-6:focus { +.emotion-1:focus { outline: none; } -.emotion-6:focus path { - stroke: #0074D9; -} -
-
- - - -
`; exports[` renders with loading 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -674,28 +335,29 @@ exports[` renders with loading 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; + cursor: pointer; } -.emotion-4:focus { +.emotion-1:focus { outline: none; } -.emotion-6 { +.emotion-2 { padding: 0 5px; display: block; width: auto; height: auto; } -.emotion-6:after { +.emotion-2:after { content: ' '; display: block; width: 16px; @@ -703,141 +365,65 @@ exports[` renders with loading 1`] = ` border-radius: 50%; border-width: 1px; border-style: solid; - border-color: #0074D9 transparent; + border-color: transparent; -webkit-animation: dual-ring-spin 0.7s ease-in-out infinite; animation: dual-ring-spin 0.7s ease-in-out infinite; margin: 0 0 0 -10px; } -.emotion-8 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); - cursor: pointer; -} - -.emotion-8 svg { - width: 16px; - height: 16px; -} - -.emotion-8:hover path { - stroke: #0074D9; -} - -.emotion-8:focus { - outline: none; -} - -.emotion-8:focus path { - stroke: #0074D9; -} -
-
- - - -
`; exports[` renders with name 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #0074D9; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -848,84 +434,68 @@ exports[` renders with name 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-6 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); cursor: pointer; } -.emotion-6 svg { - width: 16px; - height: 16px; -} - -.emotion-6:hover path { - stroke: #0074D9; -} - -.emotion-6:focus { +.emotion-1:focus { outline: none; } -.emotion-6:focus path { - stroke: #0074D9; -} -
component component component
-
- - - -
`; exports[` renders with short color 1`] = ` .emotion-0 { - box-sizing: border-box; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border: 1px solid #ccc; - width: 100%; - border-radius: 2px; - padding: 2px 5px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - direction: ltr; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - min-height: 36px; - pointer-events: all; -} - -.emotion-0:hover, -.emotion-0:focus-within { - border-color: #000; -} - -.emotion-0:focus, -.emotion-0:focus-within { - outline: 0; - box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2); -} - -.emotion-0 * { - box-sizing: border-box; -} - -.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -1170,97 +606,65 @@ exports[` renders with short color 1`] = ` flex-wrap: wrap; } -.emotion-4 { +.emotion-1 { line-height: inherit; border: none; margin-left: 5px; background: transparent; padding: 0; - width: calc(9ch + 5px); + width: calc(0ch + 5px); font-size: smaller; -} - -.emotion-4:focus { - outline: none; -} - -.emotion-6 { - text-align: center; - pointer-events: none; - margin: 0 0 0 5px; - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); cursor: pointer; } -.emotion-6 svg { - width: 16px; - height: 16px; -} - -.emotion-6:hover path { - stroke: #000; -} - -.emotion-6:focus { +.emotion-1:focus { outline: none; } -.emotion-6:focus path { - stroke: #000; -} -
-
- - - -
`; diff --git a/__tests__/components/__snapshots__/Clear.spec.js.snap b/__tests__/components/__snapshots__/Clear.spec.js.snap index f3646df5..d1607164 100644 --- a/__tests__/components/__snapshots__/Clear.spec.js.snap +++ b/__tests__/components/__snapshots__/Clear.spec.js.snap @@ -16,7 +16,7 @@ exports[` component renders correctly 1`] = ` }
component renders correctly 1`] = ` .emotion-0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex: 1; -ms-flex: 1; @@ -15,22 +12,19 @@ exports[` component renders correctly 1`] = ` flex-wrap: wrap; } -.emotion-2 { +.emotion-1 { padding: 0 5px; border-radius: 2px; line-height: 21px; margin: 3px 0 3px 5px; color: #fff; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } -.emotion-2 .react-dropdown-select-option-remove { +.emotion-1 .react-dropdown-select-option-remove { cursor: pointer; width: 22px; height: 22px; @@ -40,16 +34,16 @@ exports[` component renders correctly 1`] = ` border-radius: 0 3px 3px 0; } -.emotion-2 .react-dropdown-select-option-remove:hover { +.emotion-1 .react-dropdown-select-option-remove:hover { color: tomato; } -.emotion-2:hover, -.emotion-2:hover>span { +.emotion-1:hover, +.emotion-1:hover>span { opacity: 0.9; } -.emotion-4 { +.emotion-2 { line-height: inherit; border: none; margin-left: 5px; @@ -60,16 +54,16 @@ exports[` component renders correctly 1`] = ` cursor: pointer; } -.emotion-4:focus { +.emotion-2:focus { outline: none; }
component renders correctly 1`] = ` renders correctly 1`] = ` border: 1px solid #ccc; width: px; padding: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; @@ -27,19 +24,19 @@ exports[` renders correctly 1`] = ` outline: none; } -.emotion-2 { +.emotion-1 { padding: 10px; text-align: center; }
`; diff --git a/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap b/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap index 790180c2..5dfe9d5a 100644 --- a/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap +++ b/__tests__/components/__snapshots__/DropdownHandle.spec.js.snap @@ -22,7 +22,7 @@ exports[` component renders correctly 1`] = ` }
is disabled 1`] = ` } renders correctly 1`] = ` } component pass item renderer 1`] = ` } component renders correctly 1`] = ` } renders correctly 1`] = ` }
`; diff --git a/__tests__/components/__snapshots__/NoData.spec.js.snap b/__tests__/components/__snapshots__/NoData.spec.js.snap index de365cd4..31ad0004 100644 --- a/__tests__/components/__snapshots__/NoData.spec.js.snap +++ b/__tests__/components/__snapshots__/NoData.spec.js.snap @@ -7,6 +7,6 @@ exports[` renders correctly 1`] = ` }
`; diff --git a/__tests__/components/__snapshots__/Option.spec.js.snap b/__tests__/components/__snapshots__/Option.spec.js.snap index 7460d89d..cd4af3d0 100644 --- a/__tests__/components/__snapshots__/Option.spec.js.snap +++ b/__tests__/components/__snapshots__/Option.spec.js.snap @@ -7,9 +7,6 @@ exports[`