diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index d053a967..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,48 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true, - }, - extends: [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:react-hooks/recommended', - 'plugin:jsx-a11y/recommended', - 'plugin:prettier/recommended', - 'prettier/react', - ], - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: 2021, - sourceType: 'module', - }, - parser: '@babel/eslint-parser', - settings: { - react: { - version: 'detect', - }, - }, - plugins: ['react'], - rules: { - 'react/prop-types': [ - 2, - { - skipUndeclared: true, - }, - ], - 'prettier/prettier': [ - 'error', - { - printWidth: 100, - trailingComma: 'all', - useTabs: true, - tabWidth: 2, - semi: true, - singleQuote: true, - }, - ], - 'react/jsx-uses-react': 'error', - }, -}; diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..f486c46d --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,52 @@ +{ + "env": { + "browser": true, + "es6": true + }, + "extends": [ + "eslint:recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "plugin:jsx-a11y/recommended", + "plugin:prettier/recommended", + "prettier/react" + ], + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": 2018, + "sourceType": "module" + }, + "parser": "@babel/eslint-parser", + "settings": { + "react": { + "version": "detect" + } + }, + "plugins": ["react", "prettier"], + "rules": { + "react/prop-types": [ + 2, + { + "skipUndeclared": true + } + ], + "prettier/prettier": [ + "error", + { + "printWidth": 100, + "tabWidth": 2, + "useTabs": true, + "singleQuote": true, + "trailingComma": "es5", + "endOfLine": "lf" + } + ], + "react/jsx-uses-react": "error" + }, + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + } +} diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 0ad1245c..bb8a0ccb 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -2,10 +2,10 @@ name: "Chromatic" on: pull_request_target: branches: - - "master" + - release/** push: branches: - - "master" + - release/** jobs: test: diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml new file mode 100644 index 00000000..8884eca1 --- /dev/null +++ b/.github/workflows/codeql-analysis.yml @@ -0,0 +1,74 @@ +# For most projects, this workflow file will not need changing; you simply need +# to commit it to your repository. +# +# You may wish to alter this file to override the set of languages analyzed, +# or to provide custom queries or build logic. +# +# ******** NOTE ******** +# We have attempted to detect the languages in your repository. Please check +# the `language` matrix defined below to confirm you have the correct set of +# supported CodeQL languages. +# +name: "CodeQL" + +on: + push: + branches: + - master + - release/** + pull_request: + # The branches below must be a subset of the branches above + branches: + - master + - release/** + schedule: + - cron: '34 6 * * 4' + +jobs: + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write + + strategy: + fail-fast: false + matrix: + language: [ 'javascript' ] + # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ] + # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + # Initializes the CodeQL tools for scanning. + - name: Initialize CodeQL + uses: github/codeql-action/init@v2 + with: + languages: ${{ matrix.language }} + # If you wish to specify custom queries, you can do so here or in a config file. + # By default, queries listed here will override any specified in a config file. + # Prefix the list here with "+" to use these queries and those in the config file. + # queries: ./path/to/local/query, your-org/your-repo/queries@main + + # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). + # If this step fails, then you should remove it and run the build manually (see below) + - name: Autobuild + uses: github/codeql-action/autobuild@v2 + + # ℹī¸ Command-line programs to run using the OS shell. + # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun + + # ✏ī¸ If the Autobuild fails above, remove it and uncomment the following three lines + # and modify them (or add more) to build your code if your project + # uses a compiled language + + #- run: | + # make bootstrap + # make release + + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v2 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..d5b4b3e9 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +*.yml +*.yaml +package.json +dist/ +node_modules/ \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..2f49c528 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "tabWidth": 2, + "useTabs": true, + "singleQuote": true, + "trailingComma": "es5", + "endOfLine": "lf" +} diff --git a/.storybook/body-class.js b/.storybook/body-class.js index 0c54c887..867df010 100644 --- a/.storybook/body-class.js +++ b/.storybook/body-class.js @@ -1,2 +1,2 @@ var body = document.body; -body.classList.add( 'sui-2-12-3' ); \ No newline at end of file +body.classList.add( 'sui-2-12-8' ); \ No newline at end of file diff --git a/.storybook/main.js b/.storybook/main.js index 52c6e6bd..08479821 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -8,8 +8,7 @@ module.exports = { "@storybook/addon-links", "@storybook/addon-actions", "@storybook/addon-essentials", - "@storybook/addon-a11y", - "@storybook/addon-notes/register-panel" + "@storybook/addon-a11y" ], webpackFinal: async ( config ) => { // Change the order of resolution of main fields. diff --git a/.storybook/preview.js b/.storybook/preview.js index 8c705785..80417e14 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,7 +1,9 @@ import React from 'react'; +import { addParameters } from '@storybook/react'; import '@wpmudev/shared-ui/dist/css/shared-ui.min.css'; // Get latest SUI styles. import "./body-class"; +// List custom viewports. const customViewports = { xl: { name: 'Desktop', @@ -45,6 +47,7 @@ const customViewports = { }, }; +// Edit parameters. export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, backgrounds: { @@ -56,12 +59,22 @@ export const parameters = { viewport: { viewports: customViewports }, + viewMode: 'canvas' } +// Edit "preview" markup. +const Wrapper = ({ children }) => { + return ( +
+ { children } +
+ ); +}; + export const decorators = [ ( Story ) => ( -
+ -
+ ), -] \ No newline at end of file +]; \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 64692057..0d67ed04 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,29 +2,222 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org/) for commit guidelines. -## [1.8.0](https://github.com/wpmudev/shared-ui/compare/v1.7.0...v1.8.0) (2022-01-30) +## [1.9.1](https://github.com/wpmudev/shared-ui/compare/v1.9.0...v1.9.1) (2023-01-18) + +#### 🐛 Bug Fixes +* `react-radio-checkbox` + * [#293](https://github.com/wpmudev/shared-ui-react/pull/293) Default checked causing issues in bulk edit. ([SUI-166](https://incsub.atlassian.net/browse/SUI-166)) ([@creador-dev](https://github.com/creador-dev)) + +#### Committers: 1 +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + +## [1.9.0](https://github.com/wpmudev/shared-ui/compare/v1.8.3...v1.9.0) (2022-11-16) #### ✨ New Features -* `react-progress-bar` - * Create new component. [#139](https://github.com/wpmudev/shared-ui-react/pull/139) ([SUI-233](https://incsub.atlassian.net/browse/SUI-233)) ([@iamleigh](https://github.com/iamleigh)) -* `react-button` - * Allow icon to be placed at left or right of label. [#131](https://github.com/wpmudev/shared-ui-react/pull/131) ([SUI-219](https://incsub.atlassian.net/browse/SUI-219)) ([@Gowtham369](https://github.com/Gowtham369)) -* `react-input` - * Allow error class/state. [#132](https://github.com/wpmudev/shared-ui-react/pull/132) ([SUI-218](https://incsub.atlassian.net/browse/SUI-218)) ([@Gowtham369](https://github.com/Gowtham369)) +* `react-accordion`, `react-bulk-actions` + * [#146](https://github.com/wpmudev/shared-ui-react/pull/146) Bulk actions. ([SUI-222](https://incsub.atlassian.net/browse/SUI-222)) ([@creador-dev](https://github.com/creador-dev)) +* `react-accordion` + * [#168](https://github.com/wpmudev/shared-ui-react/pull/168) Include `checkbox` element for row/item selection. ([SUI-331](https://incsub.atlassian.net/browse/SUI-331)) ([@creador-dev](https://github.com/creador-dev)) +* `react-toggles` + * [#153](https://github.com/wpmudev/shared-ui-react/pull/153) Create component. ([SUI-291](https://incsub.atlassian.net/browse/SUI-291)) ([@iamleigh](https://github.com/iamleigh)) +* `react-radio-checkbox` + * [#169](https://github.com/wpmudev/shared-ui-react/pull/169) Create components. ([SUI-332](https://incsub.atlassian.net/browse/SUI-332)) ([@creador-dev](https://github.com/creador-dev)) #### 🚀 Improvements +* `react-input` + * [#267](https://github.com/wpmudev/shared-ui-react/pull/267) Add "forwardref" in input component to access it's actions in other components. ([SUI-425](https://incsub.atlassian.net/browse/SUI-425)) ([@creador-dev](https://github.com/creador-dev)) + * [#271](https://github.com/wpmudev/shared-ui-react/pull/271) Add show/hide button for password type. ([SUI-448](https://incsub.atlassian.net/browse/SUI-448)) ([@creador-dev](https://github.com/creador-dev)) + +#### 📝 Documentation * `react-modal` - * Trap focus without external library. [#129](https://github.com/wpmudev/shared-ui-react/pull/129) ([SUI-197](https://incsub.atlassian.net/browse/SUI-197)) ([@iamleigh](https://github.com/iamleigh)) + * [#275](https://github.com/wpmudev/shared-ui-react/pull/275) Re-rendering when input value changes. ([SUI-459](https://incsub.atlassian.net/browse/SUI-459)) ([@creador-dev](https://github.com/creador-dev)) + +#### Committers: 2 +- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + +## [1.8.3](https://github.com/wpmudev/shared-ui/compare/v1.8.2...v1.8.3) (2022-06-17) + +#### 🐛 Bug Fixes +* `react-accordion` + * When `icon` is empty, the image disappears. [#269](https://github.com/wpmudev/shared-ui-react/pull/269) ([SUI-360](https://incsub.atlassian.net/browse/SUI-360)) ([@creador-dev](https://github.com/creador-dev)) + * Blank space between icon and title when image is empty. [#269](https://github.com/wpmudev/shared-ui-react/pull/269) ([SUI-361](https://incsub.atlassian.net/browse/SUI-361)) ([@creador-dev](https://github.com/creador-dev)) + +#### Committers: 1 +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + +## [1.8.2](https://github.com/wpmudev/shared-ui/compare/v1.8.1...v1.8.2) (2022-05-30) + +#### 🚀 Improvements + +- `react-progress-bar` + - Comparing a string and a number with strict operator is pointless. [#232](https://github.com/wpmudev/shared-ui-react/pull/232) ([SUI-398](https://incsub.atlassian.net/browse/SUI-398)) ([@creador-dev](https://github.com/creador-dev)) + - Using isNaN may lead to unexpected results. [#231](https://github.com/wpmudev/shared-ui-react/pull/231) ([SUI-399](https://incsub.atlassian.net/browse/SUI-399)) ([@creador-dev](https://github.com/creador-dev)) +- `react-modal` + - Missing cleanup of timer in componentDidMount. [#230](https://github.com/wpmudev/shared-ui-react/pull/230) ([SUI-400](https://incsub.atlassian.net/browse/SUI-400)) ([@creador-dev](https://github.com/creador-dev)) +- `react-dropdown` + - Using component state to compute could lead to undesired behavior. [#255](https://github.com/wpmudev/shared-ui-react/pull/255) ([SUI-402](https://incsub.atlassian.net/browse/SUI-402)) ([@creador-dev](https://github.com/creador-dev)) + - Case clause is duplicated. [#229](https://github.com/wpmudev/shared-ui-react/pull/229) ([SUI-401](https://incsub.atlassian.net/browse/SUI-401)) ([@creador-dev](https://github.com/creador-dev)) + +#### 🐛 Bug Fixes + +- `react-pagination` + - Repeated property. [#228](https://github.com/wpmudev/shared-ui-react/pull/228) ([SUI-403](https://incsub.atlassian.net/browse/SUI-403)) ([@creador-dev](https://github.com/creador-dev)) +- `react-input` + - Class identifier is wrong. [#227](https://github.com/wpmudev/shared-ui-react/pull/227) ([SUI-404](https://incsub.atlassian.net/browse/SUI-404)) ([@creador-dev](https://github.com/creador-dev)) + +#### 🏠 Internal + +- Regular Expression Denial of Service in postcss. [#264](https://github.com/wpmudev/shared-ui-react/pull/264) ([SUI-380](https://incsub.atlassian.net/browse/SUI-380)) ([@creador-dev](https://github.com/creador-dev)) +- Regular Expression Denial of Service in trim. [#263](https://github.com/wpmudev/shared-ui-react/pull/263) ([SUI-416](https://incsub.atlassian.net/browse/SUI-416)) ([@iamleigh](https://github.com/iamleigh)) +- Regular expression denial of service in glob-parent. [#262](https://github.com/wpmudev/shared-ui-react/pull/262) ([SUI-420](https://incsub.atlassian.net/browse/SUI-420)) ([@iamleigh](https://github.com/iamleigh)) +- Inefficient Regular Expression Complexity in nth-check. [#261](https://github.com/wpmudev/shared-ui-react/pull/261) ([SUI-387](https://incsub.atlassian.net/browse/SUI-387)) ([@iamleigh](https://github.com/iamleigh)) +- Cross-site Scripting in Prism. [#234](https://github.com/wpmudev/shared-ui-react/pull/234) ([SUI-381](https://incsub.atlassian.net/browse/SUI-381)) ([@creador-dev](https://github.com/creador-dev)) +- Bump ws from 7.4.0 to 7.5.7 [#254](https://github.com/wpmudev/shared-ui-react/pull/254) ([SUI-419](https://incsub.atlassian.net/browse/SUI-419)) ([@iamleigh](https://github.com/iamleigh)) +- Bump hosted-git-info from 2.8.8 to 2.8.9 [#253](https://github.com/wpmudev/shared-ui-react/pull/253) ([SUI-417](https://incsub.atlassian.net/browse/SUI-417)) ([@iamleigh](https://github.com/iamleigh)) +- Bump ssri from 6.0.1 to 6.0.2 [#252](https://github.com/wpmudev/shared-ui-react/pull/252) ([SUI-415](https://incsub.atlassian.net/browse/SUI-415)) ([@iamleigh](https://github.com/iamleigh)) +- Bump y18n from 4.0.0 to 4.0.3 [#251](https://github.com/wpmudev/shared-ui-react/pull/251) ([SUI-414](https://incsub.atlassian.net/browse/SUI-414)) ([@iamleigh](https://github.com/iamleigh)) +- Bump elliptic from 6.5.3 to 6.5.4 [#250](https://github.com/wpmudev/shared-ui-react/pull/250) ([SUI-413](https://incsub.atlassian.net/browse/SUI-413)) ([@iamleigh](https://github.com/iamleigh)) +- Bump node-notifier from 8.0.0 to 8.0.2 [#249](https://github.com/wpmudev/shared-ui-react/pull/249) ([SUI-412](https://incsub.atlassian.net/browse/SUI-412)) ([@iamleigh](https://github.com/iamleigh)) +- Bump ini from 1.3.5 to 1.3.8 [#248](https://github.com/wpmudev/shared-ui-react/pull/248) ([SUI-411](https://incsub.atlassian.net/browse/SUI-411)) ([@iamleigh](https://github.com/iamleigh)) +- Bump tmpl from 1.0.4 to 1.0.5 [#247](https://github.com/wpmudev/shared-ui-react/pull/247) ([SUI-410](https://incsub.atlassian.net/browse/SUI-410)) ([@iamleigh](https://github.com/iamleigh)) +- Bump async from 2.6.3 to 2.6.4 [#244](https://github.com/wpmudev/shared-ui-react/pull/244) ([SUI-373](https://incsub.atlassian.net/browse/SUI-373)) ([@iamleigh](https://github.com/iamleigh)) +- Regular Expression Denial of Service in trim-newlines. [#246](https://github.com/wpmudev/shared-ui-react/pull/246) ([SUI-394](https://incsub.atlassian.net/browse/SUI-394)) ([@iamleigh](https://github.com/iamleigh)) +- Incorrect comparison in axios. [#241](https://github.com/wpmudev/shared-ui-react/pull/241) ([SUI-375](https://incsub.atlassian.net/browse/SUI-375)) ([@iamleigh](https://github.com/iamleigh)) +- Bump color-string from 1.5.4 to 1.9.1 [#225](https://github.com/wpmudev/shared-ui-react/pull/225) ([SUI-393](https://incsub.atlassian.net/browse/SUI-393)) ([@iamleigh](https://github.com/iamleigh)) +- Run Chromatic when pushing to any release branch. [#226](https://github.com/wpmudev/shared-ui-react/pull/226) ([SUI-395](https://incsub.atlassian.net/browse/SUI-395)) ([@iamleigh](https://github.com/iamleigh)) +- Configure CodeQL alerts. [#217](https://github.com/wpmudev/shared-ui-react/pull/217) ([SUI-376](https://incsub.atlassian.net/browse/SUI-376)) ([@iamleigh](https://github.com/iamleigh)) +- Bump path-parse from 1.0.6 to 1.0.7 [#223](https://github.com/wpmudev/shared-ui-react/pull/223) ([SUI-391](https://incsub.atlassian.net/browse/SUI-391)) ([@iamleigh](https://github.com/iamleigh)) +- Bump nanoid from 3.1.16 to 3.3.4 [#218](https://github.com/wpmudev/shared-ui-react/pull/218) ([SUI-377](https://incsub.atlassian.net/browse/SUI-377)) ([@iamleigh](https://github.com/iamleigh)) +- Bump tar from 4.4.13 to 4.4.19 [#222](https://github.com/wpmudev/shared-ui-react/pull/222) ([SUI-390](https://incsub.atlassian.net/browse/SUI-390)) ([@iamleigh](https://github.com/iamleigh)) +- Bump shelljs from 0.8.4 to 0.8.5 [#221](https://github.com/wpmudev/shared-ui-react/pull/221) ([SUI-383](https://incsub.atlassian.net/browse/SUI-383)) ([@iamleigh](https://github.com/iamleigh)) +- Bump node-fetch from 2.6.1 to 2.6.7 [#220](https://github.com/wpmudev/shared-ui-react/pull/220) ([SUI-382](https://incsub.atlassian.net/browse/SUI-382)) ([@iamleigh](https://github.com/iamleigh)) +- Bump lodash-es from 4.17.15 to 4.17.21 [#219](https://github.com/wpmudev/shared-ui-react/pull/219) ([SUI-378](https://incsub.atlassian.net/browse/SUI-378)) ([@iamleigh](https://github.com/iamleigh)) +- Bump moment from 2.29.1 to 2.29.3 [#216](https://github.com/wpmudev/shared-ui-react/pull/216) ([SUI-374](https://incsub.atlassian.net/browse/SUI-374)) ([@iamleigh](https://github.com/iamleigh)) +- Bump ejs from 3.1.5 to 3.1.7 [#214](https://github.com/wpmudev/shared-ui-react/pull/214) ([SUI-370](https://incsub.atlassian.net/browse/SUI-370)) ([@iamleigh](https://github.com/iamleigh)) +- Bump handlebars from 4.7.6 to 4.7.7 [#224](https://github.com/wpmudev/shared-ui-react/pull/224) ([SUI-392](https://incsub.atlassian.net/browse/SUI-392)) ([@iamleigh](https://github.com/iamleigh)) +- Bump minimist from 1.2.5 to 1.2.6 [#215](https://github.com/wpmudev/shared-ui-react/pull/215) ([SUI-371](https://incsub.atlassian.net/browse/SUI-371)) ([@iamleigh](https://github.com/iamleigh)) +- ESLint and Prettier configurations not detected. [#265](https://github.com/wpmudev/shared-ui-react/pull/265) ([SUI-396](https://incsub.atlassian.net/browse/SUI-396)) ([@iamleigh](https://github.com/iamleigh)) +- Remove `notes` support on add-ons panel. [#260](https://github.com/wpmudev/shared-ui-react/pull/260) ([SUI-421](https://incsub.atlassian.net/browse/SUI-421)) ([@iamleigh](https://github.com/iamleigh)) +- Upgrade to Storybook 6.4.22. [#259](https://github.com/wpmudev/shared-ui-react/pull/259) ([SUI-315](https://incsub.atlassian.net/browse/SUI-315)) ([@iamleigh](https://github.com/iamleigh)) + +#### Committers: 2 + +- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + +## [1.8.1](https://github.com/wpmudev/shared-ui/compare/v1.8.0...v1.8.1) (2022-05-03) + +#### ✨ New Features + +- `react-input` + - Add `prefix` prop. [#207](https://github.com/wpmudev/shared-ui-react/pull/207) ([SUI-356](https://incsub.atlassian.net/browse/SUI-356)) ([@creador-dev](https://github.com/creador-dev)) + - Add `suffix` prop. [#206](https://github.com/wpmudev/shared-ui-react/pull/206) ([SUI-357](https://incsub.atlassian.net/browse/SUI-357)) ([@creador-dev](https://github.com/creador-dev)) + - Allow constrained field. [#205](https://github.com/wpmudev/shared-ui-react/pull/205) ([SUI-358](https://incsub.atlassian.net/browse/SUI-358)) ([@iamleigh](https://github.com/iamleigh)) +- `react-notifications` + - Support callback function for dismiss button. [#187](https://github.com/wpmudev/shared-ui-react/pull/187) ([SUI-349](https://incsub.atlassian.net/browse/SUI-349)) ([@creador-dev](https://github.com/creador-dev)) + +#### 🚀 Improvements + +- `react-dropdown` + - Add `disabled` property for trigger menu button. [#184](https://github.com/wpmudev/shared-ui-react/pull/184) ([SUI-341](https://incsub.atlassian.net/browse/SUI-341)) ([@creador-dev](https://github.com/creador-dev)) +- `react-notifications` + - Ability to edit dismiss button label. [#181](https://github.com/wpmudev/shared-ui-react/pull/181) ([SUI-350](https://incsub.atlassian.net/browse/SUI-350)) ([@iamleigh](https://github.com/iamleigh)) + - Loading must be a state of the component. [#180](https://github.com/wpmudev/shared-ui-react/pull/180) ([SUI-347](https://incsub.atlassian.net/browse/SUI-347)) ([@iamleigh](https://github.com/iamleigh)) + +#### 🐛 Bug Fixes + +- `react-pagination` + - Parent wrapper breaks the component. [#209](https://github.com/wpmudev/shared-ui-react/pull/209) ([SUI-362](https://incsub.atlassian.net/browse/SUI-362)) ([@creador-dev](https://github.com/creador-dev)) + - Wrong package version for `builder`. [#198](https://github.com/wpmudev/shared-ui-react/pull/198) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-post` + - Image keeps on loading when is empty or null. [#183](https://github.com/wpmudev/shared-ui-react/pull/183) ([SUI-343](https://incsub.atlassian.net/browse/SUI-343)) ([@creador-dev](https://github.com/creador-dev)) + - Wrong package version for `builder`. [#199](https://github.com/wpmudev/shared-ui-react/pull/199) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) + - Disabled state is missing. [#185](https://github.com/wpmudev/shared-ui-react/pull/185) ([SUI-345](https://incsub.atlassian.net/browse/SUI-345)) ([@creador-dev](https://github.com/creador-dev)) + - Post title HTML chars are rendered encoded on hovering. [#163](https://github.com/wpmudev/shared-ui-react/pull/163) ([SUI-264](https://incsub.atlassian.net/browse/SUI-264)) ([@creador-dev](https://github.com/creador-dev)) +- `react-progress-bar` + - Wrong package version for `builder`. [#200](https://github.com/wpmudev/shared-ui-react/pull/200) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-notifications` + - Wrong package version for `builder`. [#197](https://github.com/wpmudev/shared-ui-react/pull/197) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-modal` + - Wrong package version for `builder`. [#196](https://github.com/wpmudev/shared-ui-react/pull/196) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-input` + - Wrong package version for `builder`. [#195](https://github.com/wpmudev/shared-ui-react/pull/195) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-dropdown` + - Wrong package version for `builder`. [#194](https://github.com/wpmudev/shared-ui-react/pull/194) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) + - Missing `disabled` styles for options. [#186](https://github.com/wpmudev/shared-ui-react/pull/186) ([SUI-342](https://incsub.atlassian.net/browse/SUI-342)) ([@creador-dev](https://github.com/creador-dev)) +- `react-button` + - Wrong package version for `builder`. [#193](https://github.com/wpmudev/shared-ui-react/pull/193) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `react-box` + - Wrong package version for `builder`. [#192](https://github.com/wpmudev/shared-ui-react/pull/192) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) +- `core` + - Wrong package version for `builder`. [#190](https://github.com/wpmudev/shared-ui-react/pull/190) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) + - Missing `ProgressBar` component. [#182](https://github.com/wpmudev/shared-ui-react/pull/182) ([SUI-351](https://incsub.atlassian.net/browse/SUI-351)) ([@iamleigh](https://github.com/iamleigh)) +- `react-accordion` + - Wrong package version for `builder`. [#191](https://github.com/wpmudev/shared-ui-react/pull/191) ([SUI-353](https://incsub.atlassian.net/browse/SUI-353)) ([@creador-dev](https://github.com/creador-dev)) + - Demo image is missing in the stories. [#174](https://github.com/wpmudev/shared-ui-react/pull/174) ([SUI-335](https://incsub.atlassian.net/browse/SUI-335)) ([@creador-dev](https://github.com/creador-dev)) + +#### 📝 Documentation + +- `react-pagination` + - Improve stories. [#213](https://github.com/wpmudev/shared-ui-react/pull/213) ([SUI-339](https://incsub.atlassian.net/browse/SUI-339)) ([@iamleigh](https://github.com/iamleigh)) +- `react-accordion` + - Improve stories. [#208](https://github.com/wpmudev/shared-ui-react/pull/208) ([SUI-352](https://incsub.atlassian.net/browse/SUI-352)) ([@iamleigh](https://github.com/iamleigh)) +- `react-progress-bar` + - Improve stories. [#176](https://github.com/wpmudev/shared-ui-react/pull/176) ([SUI-337](https://incsub.atlassian.net/browse/SUI-337)) ([@creador-dev](https://github.com/creador-dev)) +- `react-input` + - Improve stories. [#175](https://github.com/wpmudev/shared-ui-react/pull/175) ([SUI-336](https://incsub.atlassian.net/browse/SUI-336)) ([@iamleigh](https://github.com/iamleigh)) +- `react-notifications` + - Improve stories. [#179](https://github.com/wpmudev/shared-ui-react/pull/179) ([SUI-346](https://incsub.atlassian.net/browse/SUI-346)) ([@iamleigh](https://github.com/iamleigh)) +- `react-post` + - Improve stories. [#178](https://github.com/wpmudev/shared-ui-react/pull/178) ([SUI-340](https://incsub.atlassian.net/browse/SUI-340)) ([@iamleigh](https://github.com/iamleigh)) +- `react-dropdown` + - Improve stories. [#177](https://github.com/wpmudev/shared-ui-react/pull/177) ([SUI-338](https://incsub.atlassian.net/browse/SUI-338)) ([@iamleigh](https://github.com/iamleigh)) +- `react-button-icon` + - Improve stories. [#173](https://github.com/wpmudev/shared-ui-react/pull/173) ([SUI-334](https://incsub.atlassian.net/browse/SUI-334)) ([@iamleigh](https://github.com/iamleigh)) +- `react-button` + - Improve stories. [#172](https://github.com/wpmudev/shared-ui-react/pull/172) ([SUI-333](https://incsub.atlassian.net/browse/SUI-333)) ([@iamleigh](https://github.com/iamleigh)) + +#### 🏠 Internal + +- Invalid hook call. [#204](https://github.com/wpmudev/shared-ui-react/pull/204) ([SUI-355](https://incsub.atlassian.net/browse/SUI-355)) ([@creador-dev](https://github.com/creador-dev)) +- Set `react` dependency to latest version for all packages. [#171](https://github.com/wpmudev/shared-ui-react/pull/171) ([SUI-203](https://incsub.atlassian.net/browse/SUI-203)) ([@iamleigh](https://github.com/iamleigh)) +- Rollup was trying to import and compile `react-dom` causing an error during build. [#166](https://github.com/wpmudev/shared-ui-react/pull/166) ([SUI-329](https://incsub.atlassian.net/browse/SUI-329)) ([@creador-dev](https://github.com/creador-dev)) +- Upgrade `SUI` dependency to its latest version. [#160](https://github.com/wpmudev/shared-ui-react/pull/160) ([SUI-314](https://incsub.atlassian.net/browse/SUI-314)) ([@iamleigh](https://github.com/iamleigh)) + +#### Committers: 2 + +- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + +## [1.8.0](https://github.com/wpmudev/shared-ui/compare/v1.7.0...v1.8.0) (2022-01-30) + +#### ✨ New Features + +- `react-progress-bar` + - Create new component. [#139](https://github.com/wpmudev/shared-ui-react/pull/139) ([SUI-233](https://incsub.atlassian.net/browse/SUI-233)) ([@iamleigh](https://github.com/iamleigh)) +- `react-button` + - Allow icon to be placed at left or right of label. [#131](https://github.com/wpmudev/shared-ui-react/pull/131) ([SUI-219](https://incsub.atlassian.net/browse/SUI-219)) ([@Gowtham369](https://github.com/Gowtham369)) +- `react-input` + - Allow error class/state. [#132](https://github.com/wpmudev/shared-ui-react/pull/132) ([SUI-218](https://incsub.atlassian.net/browse/SUI-218)) ([@Gowtham369](https://github.com/Gowtham369)) + +#### 🚀 Improvements + +- `react-modal` + - Trap focus without external library. [#129](https://github.com/wpmudev/shared-ui-react/pull/129) ([SUI-197](https://incsub.atlassian.net/browse/SUI-197)) ([@iamleigh](https://github.com/iamleigh)) #### 🐛 Bug Fixes -* `react-post` - * Misaligned description when `reading time` is missing. [#147](https://github.com/wpmudev/shared-ui-react/pull/147) ([SUI-257](https://incsub.atlassian.net/browse/SUI-257)) ([@iamleigh](https://github.com/iamleigh)) + +- `react-post` + - Misaligned description when `reading time` is missing. [#147](https://github.com/wpmudev/shared-ui-react/pull/147) ([SUI-257](https://incsub.atlassian.net/browse/SUI-257)) ([@iamleigh](https://github.com/iamleigh)) #### 🏠 Internal -* Update change log file to new structure. [#157](https://github.com/wpmudev/shared-ui-react/pull/157) ([SUI-271](https://incsub.atlassian.net/browse/SUI-271)) ([@iamleigh](https://github.com/iamleigh)) -* Styled components can't be loaded multiple times. [#141](https://github.com/wpmudev/shared-ui-react/pull/141) ([SUI-272](https://incsub.atlassian.net/browse/SUI-272)) ([@iamleigh](https://github.com/iamleigh)) -* Update change log labels. [#140](https://github.com/wpmudev/shared-ui-react/pull/140) ([SUI-270](https://incsub.atlassian.net/browse/SUI-270)) ([@iamleigh](https://github.com/iamleigh)) + +- Update change log file to new structure. [#157](https://github.com/wpmudev/shared-ui-react/pull/157) ([SUI-271](https://incsub.atlassian.net/browse/SUI-271)) ([@iamleigh](https://github.com/iamleigh)) +- Styled components can't be loaded multiple times. [#141](https://github.com/wpmudev/shared-ui-react/pull/141) ([SUI-272](https://incsub.atlassian.net/browse/SUI-272)) ([@iamleigh](https://github.com/iamleigh)) +- Update change log labels. [#140](https://github.com/wpmudev/shared-ui-react/pull/140) ([SUI-270](https://incsub.atlassian.net/browse/SUI-270)) ([@iamleigh](https://github.com/iamleigh)) #### Committers: 2 + - Gowtham Ravipati ([@Gowtham369](https://github.com/Gowtham369)) -- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) \ No newline at end of file +- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) diff --git a/README.md b/README.md index 7c42717c..8b386284 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,10 @@ Component | Version [Button Icon](https://wpmudev.github.io/shared-ui-react/?path=/story/components-button-icon--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-button-icon.svg)](https://www.npmjs.com/package/@wpmudev/react-button-icon) [Dropdown](https://wpmudev.github.io/shared-ui-react/?path=/story/components-dropdown--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-dropdown.svg)](https://www.npmjs.com/package/@wpmudev/react-dropdown) [Input](https://wpmudev.github.io/shared-ui-react/?path=/story/components-input--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-input.svg)](https://www.npmjs.com/package/@wpmudev/react-input) +[Notifications](https://wpmudev.github.io/shared-ui-react/?path=/story/components-notifications-single-line--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-notifications.svg)](https://www.npmjs.com/package/@wpmudev/react-notifications) +[Pagination](https://wpmudev.github.io/shared-ui-react/?path=/story/components-pagination--simple) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-pagination.svg)](https://www.npmjs.com/package/@wpmudev/react-pagination) [Post](https://wpmudev.github.io/shared-ui-react/?path=/story/components-post--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-post.svg)](https://www.npmjs.com/package/@wpmudev/react-post) +[Progress Bar](https://wpmudev.github.io/shared-ui-react/?path=/story/components-progress-bar--unboxed) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-progress-bar.svg)](https://www.npmjs.com/package/@wpmudev/react-progress-bar) ## Getting Started diff --git a/docs/contributions.md b/docs/contributions.md index 103e7631..598c4111 100644 --- a/docs/contributions.md +++ b/docs/contributions.md @@ -1,70 +1,69 @@ # How to Contribute -If you are looking for a bug to fix, check out [Issues List](https://github.com/wpmudev/shared-ui-react/issues) on GitHub. Otherwise please open a new issue. +The **WPMU DEV Products Team** bases the roadmap on its planned design and development path, subject to changes based on our products' needs and our clients' feedback. Find the entire backlog of this library on our [JIRA](https://incsub.atlassian.net/browse/SUI) board. -## Working on Issues. +## Working on Issues -SUI React goal is to convert [Shared UI Library](https://github.com/wpmudev/shared-ui) into React native components. If there is part of the implementation you disagree with please open a [new issue](https://github.com/wpmudev/shared-ui-react/issues/new). +Before submitting any PR, please open a [task](https://incsub.atlassian.net/browse/SUI) first in the **Backlog** list. -### Add a Feature. +### New Feature -We consider any new API to be a new feature. An API is any of the following: +Changes done to introduce a new API are considered a new feature. These can be: -- Adding a new React Component -- Update to React Component APIs -- Prop addition on React Component +- Create a new package +- Update to any package APIs +- Add a new component to a package +- Property addition on the component -> If changes fall under these categories or you'd like to add a new package please open an [issue](https://github.com/wpmudev/shared-ui-react/issues/new) first. +### Fixes or Improvements -### Fixing Bugs. +- If the issue is a doc change (README, documentation, and more.) +- If it is a bug or mistake in the source code. +- Any change to the API that does not fall into the new feature category. -Go ahead and open a pull request when: +### Commit Message Format -- The issue is a small doc change (READMEs, documentation, etc.). -- The changes you want to perform are under 10 - 20 lines of code. - -> Have in mind that anything larger to 20 lines of code or changes to an API will require an issue to be opened first. - -## Pull Request Message Format - -The pull request message to the @wpmudev/react-foo package, for GitHub issue 1234, should look like this: +The final pull request commit message for a react-foo package should look like this: ``` -# For a fix to an issue -🐛 fix(react-foo): Short description of fix. - # For a new feature -✨ new(react-foo): Short description of feature. +new(foo): Task title or short description of the feature. + +# For a bug fix or improvement +fix(foo): Task title or short description of fix. -# For a doc update -📝 docs(react-foo): Short description of doc changes. +# For accessibility (only) improvement. +aria(foo): Task title or short description of fix. -# For accessibility improvements -â™ŋī¸ aria(react-foo): Short description of improvement. +# For a doc update. +docs(foo): Task title or short description of doc change. ``` -This commit message is pulled into our `CHANGELOG` when we release and is based on Angular's git commit guidelines. +When released, this commit message is automatically pulled into our `CHANGELOG` and follows [Conventional Commits](https://conventionalcommits.org/) guidelines. -## Pull Requests. +## Pull Requests -Pull requests should meet the following criteria: +The PRs must meet the following criteria: -- **PRs should be focused!** PRs should focus on fixing one issue or an additional feature. Anything extra requires another PR. -- If there is an existing [issue(s)](https://github.com/wpmudev/shared-ui-react/issues/) please refer to it in the description of your PR. -- Please also include notes about what your changes are trying to achieve (or anything you've learned). Brevity appreciated. +- **PRs should be focused!** Pull requests should focus on fixing one issue at a time. Anything extra requires a new PR. +- Every pull request must have a task open on our JIRA board. +- Please, add notes about what the changes are trying to achieve (or what you have learned). Brevity appreciated! ### Process -Before opening a PR, it should be up to date with `development` branch, which is the targeted release branch. +Before opening a PR, it should be up to date with the targeted release branch (release/). #### Checklist: -- [ ] Lint passes. -- [ ] Chromatic passes. -- [ ] Descriptions about your changes. +- [ ] All unit tests pass. + - [ ] Chromatic test passes. + - [ ] CodeQL test passes. + - [ ] Security/Snyk test passes. +- [ ] Descriptions of the changes done. +- [ ] Sign the pull request by assigning it to yourself in the "assignees" section. -Once you have passed all checks, the process is as follows: +Once all the checks pass, the process is as follows: -1. One of the admins ([@iamleigh](https://github.com/iamleigh), [@a-danae](https://github.com/a-danae)) will review your changes. -2. We will either approve, request changes, or explain why we can't accept these changes. And we'll work from there. -3. Assuming approval, one of the admins will merge your changes and remove the branch from the PR. \ No newline at end of file +1. Move the task on the JIRA board to the "Waiting for Merge" column. +2. Ping on the project lead ([@iamleigh](https://github.com/iamleigh)) to notify the changes are ready for review. +3. Once the PR passes the review, the project lead will merge the changes and remove the branch from the PR. diff --git a/docs/release.md b/docs/release.md index f1b0bb7a..33921cfb 100644 --- a/docs/release.md +++ b/docs/release.md @@ -9,7 +9,7 @@ Have in mind this guide is for developers member of [WPMU DEV Organization](http Make sure builder file is executable by running the following command: ``` -chmod +x packages/builder/lib/builder.js +chmod +x packages/compiler/lib/builder.js ``` ## Prepare package. @@ -111,7 +111,7 @@ export GITHUB_AUTH="token_goes_here" 2. Generate list of changes based on PRs after latest release. ``` -yarn logs +yarn changelog ``` 3. Copy and paste generated list into `CHANGELOG.md` file. diff --git a/package.json b/package.json index aac3a35d..4f6c06f2 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ ], "dependencies": { "@octokit/core": "^3.4.0", - "@wpmudev/shared-ui": "^2.12.3", + "@wpmudev/shared-ui": "^2.12.8", "react": "^17.0.2", "react-dom": "^17.0.2", "regenerator-runtime": "^0.13.7", @@ -21,32 +21,40 @@ "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.5", - "@storybook/addon-a11y": "^6.1.21", - "@storybook/addon-actions": "^6.1.21", - "@storybook/addon-essentials": "^6.1.21", - "@storybook/addon-links": "^6.1.21", - "@storybook/addon-notes": "^5.3.21", - "@storybook/react": "^6.1.21", + "@storybook/addon-a11y": "^6.4.22", + "@storybook/addon-actions": "^6.4.22", + "@storybook/addon-essentials": "^6.4.22", + "@storybook/addon-links": "^6.4.22", + "@storybook/react": "^6.4.22", + "@wordpress/eslint-plugin": "^12.2.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.1", - "chromatic": "^5.4.0", + "chromatic": "^6.5.4", "css-loader": "^5.0.1", - "eslint": "^7.18.0", - "eslint-config-prettier": "^7.2.0", - "eslint-plugin-jsx-a11y": "^6.4.1", - "eslint-plugin-prettier": "^3.3.1", - "eslint-plugin-react": "^7.22.0", - "eslint-plugin-react-hooks": "^4.2.0", + "eslint": "^8.15.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.29.4", + "eslint-plugin-react-hooks": "^4.5.0", + "eslint-plugin-storybook": "^0.5.11", "gh-pages": "^3.1.0", "jest": "^26.6.3", - "lerna": "^3.22.1", - "lerna-changelog": "^1.0.1", + "lerna": "^4.0.0", + "lerna-changelog": "^2.2.0", "prettier": "2.2.1", "react-is": "^17.0.1", "react-test-renderer": "^17.0.1", "sass-loader": "^10.1.0", "style-loader": "^2.0.0" }, + "resolutions": { + "nth-check": "^2.0.1", + "glob-parent": "^6.0.2", + "trim": "^1.0.1", + "postcss": "^8.4.13", + "autoprefixer": "^10.4.7" + }, "scripts": { "build": "npx lerna run build", "test": "echo \"Error: no test specified\" && exit 1", @@ -61,13 +69,13 @@ "changelog": { "repo": "wpmudev/shared-ui-react", "labels": { - "breaking": "đŸ’Ĩ Breaking Changes", + "breaking": "đŸ’Ĩ Breaking Changes", "new": "✨ New Features", "improvement": "🚀 Improvements", "accessibility": "â™ŋī¸ Accessibility", "bug": "🐛 Bug Fixes", "documentation": "📝 Documentation", - "internal": "🏠 Internal" + "internal": "🏠 Internal" }, "cacheDir": ".changelog" } diff --git a/packages/compiler/lib/builder.js b/packages/compiler/lib/builder.js index 099631b1..0d1bc932 100755 --- a/packages/compiler/lib/builder.js +++ b/packages/compiler/lib/builder.js @@ -1,17 +1,17 @@ #!/usr/bin/env node -const rollup = require( 'rollup' ); -const path = require( 'path' ); -const resolve = require( '@rollup/plugin-node-resolve' ).default; -const babel = require( '@rollup/plugin-babel' ).default; +const rollup = require('rollup'); +const path = require('path'); +const resolve = require('@rollup/plugin-node-resolve').default; +const babel = require('@rollup/plugin-babel').default; const postcss = require('rollup-plugin-postcss'); const currentWorkingPath = process.cwd(); -const { src, name } = require( path.join( currentWorkingPath, 'package.json' ) ); +const { src, name } = require(path.join(currentWorkingPath, 'package.json')); -const inputPath = path.join( currentWorkingPath, src ); +const inputPath = path.join(currentWorkingPath, src); // Little workaround to get package name without scope. -const fileName = name.replace( '@wpmudev/', '' ); +const fileName = name.replace('@wpmudev/', ''); // see below for details on the options const inputOptions = { @@ -28,15 +28,11 @@ const inputOptions = { exclude: 'node_modules/**', plugins: [ '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-private-methods' + '@babel/plugin-proposal-private-methods', ], }), ], - external: [ - 'react', - 'styled-components', - '@justfixnyc/react-aria-modal' - ], + external: ['react', 'react-dom', 'styled-components', '@justfixnyc/react-aria-modal'], }; const outputOptions = [ @@ -52,11 +48,11 @@ const outputOptions = [ async function build() { // Create bundle. - const bundle = await rollup.rollup( inputOptions ); + const bundle = await rollup.rollup(inputOptions); // Loop through the options and write individual bundles. - outputOptions.forEach( async ( options ) => { - await bundle.write( options ); + outputOptions.forEach(async (options) => { + await bundle.write(options); }); } -build(); \ No newline at end of file +build(); diff --git a/packages/compiler/package.json b/packages/compiler/package.json index 7cda8add..14c30fb8 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@wpmudev/react-builder", - "version": "0.0.0", + "version": "1.0.1", "description": "> TODO: description", "author": "WPMU DEV", "contributors": [ diff --git a/packages/core/dist/shared-ui-react.cjs.js b/packages/core/dist/shared-ui-react.cjs.js index cd7db41f..166828ae 100644 --- a/packages/core/dist/shared-ui-react.cjs.js +++ b/packages/core/dist/shared-ui-react.cjs.js @@ -4,33 +4,56 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); var styled = require('styled-components'); -var AriaModal = require('@justfixnyc/react-aria-modal'); +var ReactDOM = require('react-dom'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled); -var AriaModal__default = /*#__PURE__*/_interopDefaultLegacy(AriaModal); +var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM); -function _extends() { - _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; +function ownKeys$8(object, enumerableOnly) { + var keys = Object.keys(object); - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - return target; - }; + return keys; +} - return _extends.apply(this, arguments); +function _objectSpread2$8(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { + _defineProperty$9(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; } -function _objectWithoutPropertiesLoose(source, excluded) { +function _defineProperty$9(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _objectWithoutPropertiesLoose$d(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -45,10 +68,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { return target; } -function _objectWithoutProperties(source, excluded) { +function _objectWithoutProperties$d(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); + var target = _objectWithoutPropertiesLoose$d(source, excluded); var key, i; @@ -66,265 +89,268 @@ function _objectWithoutProperties(source, excluded) { return target; } -function _taggedTemplateLiteral(strings, raw) { - if (!raw) { - raw = strings.slice(0); - } +var _excluded$d = ["label", "icon", "iconRight", "design", "color", "className", "loading"]; - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } +var Button$1 = function Button(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconRight = _ref.iconRight, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$d(_ref, _excluded$d); + + var loader = /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon && !iconRight && '' !== icon && /*#__PURE__*/React__default["default"].createElement("span", { + className: 'sui-icon-' + icon, + "aria-hidden": "true" + }), label, icon && iconRight && '' !== icon && /*#__PURE__*/React__default["default"].createElement("span", { + className: 'sui-icon-' + icon, + "aria-hidden": "true" })); -} + className = "sui-button".concat(iconRight ? ' sui-button-icon-right' : '').concat(className ? ' ' + className : ''); // Set button color. + + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; + + case 'gray': + default: + className += ''; + break; + } // Set button style. -function _templateObject3() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tdisplay: ", ";\n\t", "\n\t", "\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-top-width: ", "px;\n\t", "\n\n\t", "\n\t", "\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); - _templateObject3 = function _templateObject3() { - return data; - }; + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; + break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = 'button'; + + if (props.href) { + htmlTag = 'a'; + } else if (props.htmlFor) { + htmlTag = 'label'; + } + + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$8({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); +}; + +function ownKeys$7(object, enumerableOnly) { + var keys = Object.keys(object); - return data; + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + + return keys; } -function _templateObject2() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-top-width: ", "px;\n\tborder-bottom-width: ", "px;\n\ttext-align: ", ";\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); +function _objectSpread2$7(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { + _defineProperty$8(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; +} - _templateObject2 = function _templateObject2() { - return data; - }; +function _defineProperty$8(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - return data; + return obj; } -function _templateObject() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tdisplay: ", ";\n\t", "\n\t", "\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-bottom-width: ", "px;\n\t", "\n\n\t", "\n\t", "\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); +function _objectWithoutPropertiesLoose$c(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject = function _templateObject() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -var utils = { - gutter: 30, - gutter_md: 20 -}; -var screen = { - mobile: 480, - tablet: 783, - laptop: 1200, - desktop: 1500 -}; -var device = { - mobile: "(min-width: ".concat(screen.mobile, "px)"), - tablet: "(min-width: ".concat(screen.tablet, "px)"), - laptop: "(min-width: ".concat(screen.laptop, "px)"), - desktop: "(min-width: ".concat(screen.desktop, "px)") -}; +function _objectWithoutProperties$c(source, excluded) { + if (source == null) return {}; -var Box = function Box(_ref) { - var children = _ref.children, - className = _ref.className, - props = _objectWithoutProperties(_ref, ["children", "className"]); + var target = _objectWithoutPropertiesLoose$c(source, excluded); - return /*#__PURE__*/React__default['default'].createElement("div", _extends({ - className: 'undefined' !== typeof className && '' !== className ? "sui-box ".concat(className) : 'sui-box' - }, props), children); -}; + var key, i; -var BoxTitle = function BoxTitle(_ref2) { - var icon = _ref2.icon, - tagLabel = _ref2.tagLabel, - tagColor = _ref2.tagColor, - tagSize = _ref2.tagSize, - tagDesign = _ref2.tagDesign, - className = _ref2.className, - children = _ref2.children, - props = _objectWithoutProperties(_ref2, ["icon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"]); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - var tagClass = 'sui-tag'; + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - switch (tagColor) { - case 'red': - case 'yellow': - case 'green': + return target; +} + +var _excluded$c = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + +var ButtonIcon$5 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$c(_ref, _excluded$c); + + var loader = /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. + + switch (color) { case 'blue': + case 'green': + case 'red': + case 'orange': case 'purple': - tagClass += ' sui-tag-' + tagColor; + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - } - switch (tagSize) { - case 'sm': - case 'small': - tagClass += ' sui-tag-sm'; + case 'gray': + default: + className += ''; break; - } + } // Set button style. - switch (tagDesign) { + + switch (design) { + case 'ghost': case 'outlined': - tagClass += ' sui-tag-ghost'; + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; } - return /*#__PURE__*/React__default['default'].createElement("h3", _extends({ - className: 'undefined' !== typeof className && '' !== className ? "sui-box-title ".concat(className) : 'sui-box-title' - }, props), icon && "" !== icon && /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(icon, " sui-md"), - "aria-hidden": "true" - }), children, tagLabel && '' !== tagLabel && /*#__PURE__*/React__default['default'].createElement("span", { - className: tagClass, - style: { - marginLeft: 10 - } - }, tagLabel)); + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$7({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -var Header = styled__default['default'].div.attrs(function (props) { - return { - props: props - }; -})(_templateObject(), function (props) { - return 'block' !== props.display ? 'flex' : 'block'; -}, function (props) { - return 'block' !== props.display && 'flex-flow: row wrap;'; -}, function (props) { - return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; -}, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md / 2; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md / 2; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.border || 0 === props.border ? props.border : 1; -}, function (props) { - return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; -}, function (props) { - return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; -}, function (props) { - return 'block' !== props.display && '> * + * { margin-left: 10px; }'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter / 2; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter / 2; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); - -var BoxHeader = function BoxHeader(_ref3) { - var title = _ref3.title, - titleIcon = _ref3.titleIcon, - tagLabel = _ref3.tagLabel, - tagColor = _ref3.tagColor, - tagSize = _ref3.tagSize, - tagDesign = _ref3.tagDesign, - className = _ref3.className, - children = _ref3.children, - props = _objectWithoutProperties(_ref3, ["title", "titleIcon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"]); - - return /*#__PURE__*/React__default['default'].createElement(Header, props, title && '' !== title && /*#__PURE__*/React__default['default'].createElement(BoxTitle, { - icon: titleIcon, - tagLabel: tagLabel, - tagColor: tagColor, - tagSize: tagSize, - tagDesign: tagDesign - }, title), children); -}; - -var Body = styled__default['default'].div.attrs(function (props) { - return { - props: props - }; -})(_templateObject2(), function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.borderTop || 0 === props.borderTop ? props.borderTop : 0; -}, function (props) { - return props.borderBottom || 0 === props.borderBottom ? props.borderBottom : 0; -}, function (props) { - return props.alignment || 'left'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); - -var BoxBody = function BoxBody(_ref4) { - var className = _ref4.className, - children = _ref4.children, - props = _objectWithoutProperties(_ref4, ["className", "children"]); +function _typeof$1(obj) { + "@babel/helpers - typeof"; - return /*#__PURE__*/React__default['default'].createElement(Body, _extends({ - className: className - }, props), children); -}; + return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, _typeof$1(obj); +} -var Footer = styled__default['default'].div.attrs(function (props) { - return { - props: props - }; -})(_templateObject3(), function (props) { - return 'block' !== props.display ? 'flex' : 'block'; -}, function (props) { - return 'block' !== props.display && 'flex-flow: row wrap;'; -}, function (props) { - return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; -}, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.border || 0 === props.border || '' === props.border ? props.border : 1; -}, function (props) { - return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; -}, function (props) { - return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; -}, function (props) { - return 'block' !== props.display && '> * + * { margin-left: 10px; }'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); +function _classCallCheck$3(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} -var BoxFooter = function BoxFooter(_ref5) { - var className = _ref5.className, - children = _ref5.children, - props = _objectWithoutProperties(_ref5, ["className", "children"]); +function _defineProperties$3(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} - return /*#__PURE__*/React__default['default'].createElement(Footer, _extends({ - className: className - }, props), children); -}; +function _createClass$3(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$3(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); + return Constructor; +} -function _extends$1() { - _extends$1 = Object.assign || function (target) { +function _extends$a() { + _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -338,138 +364,152 @@ function _extends$1() { return target; }; - return _extends$1.apply(this, arguments); + return _extends$a.apply(this, arguments); } -function _objectWithoutPropertiesLoose$1(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; +function _inherits$3(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); } - return target; + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$3(subClass, superClass); } -function _objectWithoutProperties$1(source, excluded) { - if (source == null) return {}; +function _getPrototypeOf$3(o) { + _getPrototypeOf$3 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf$3(o); +} - var target = _objectWithoutPropertiesLoose$1(source, excluded); +function _setPrototypeOf$3(o, p) { + _setPrototypeOf$3 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; - var key, i; + return _setPrototypeOf$3(o, p); +} - if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); +function _isNativeReflectConstruct$3() { + if (typeof Reflect === "undefined" || !Reflect.construct) return false; + if (Reflect.construct.sham) return false; + if (typeof Proxy === "function") return true; - for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; - } + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); + return true; + } catch (e) { + return false; } +} - return target; +function _assertThisInitialized$3(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; } -var Input = function Input(_ref) { - var id = _ref.id, - size = _ref.size, - label = _ref.label, - description = _ref.description, - _ref$type = _ref.type, - type = _ref$type === void 0 ? 'text' : _ref$type, - props = _objectWithoutProperties$1(_ref, ["id", "size", "label", "description", "type"]); +function _possibleConstructorReturn$3(self, call) { + if (call && (_typeof$1(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } - var uniqueId = id && '' !== id ? id : props.property; - var clazz = 'sui-form-control'; + return _assertThisInitialized$3(self); +} - switch (size) { - case 'sm': - case 'small': - clazz += ' sui-input-sm'; - break; +function _createSuper$3(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); - case 'md': - case 'medium': - clazz += ' sui-input-md'; - break; - } + return function _createSuperInternal() { + var Super = _getPrototypeOf$3(Derived), + result; - return /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-form-field" - }, label && /*#__PURE__*/React__default['default'].createElement("label", { - htmlFor: uniqueId, - className: "sui-label" - }, label), /*#__PURE__*/React__default['default'].createElement("input", _extends$1({ - id: uniqueId, - type: type, - className: clazz - }, props)), description && /*#__PURE__*/React__default['default'].createElement("p", { - className: "sui-description" - }, description)); -}; + if (hasNativeReflectConstruct) { + var NewTarget = _getPrototypeOf$3(this).constructor; -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; + result = Reflect.construct(Super, arguments, NewTarget); + } else { + result = Super.apply(this, arguments); + } + + return _possibleConstructorReturn$3(this, result); + }; +} + +function _taggedTemplateLiteral$3(strings, raw) { + if (!raw) { + raw = strings.slice(0); } - return obj; + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); } -function ownKeys(object, enumerableOnly) { +function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { + enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); + })), keys.push.apply(keys, symbols); } return keys; } -function _objectSpread2(target) { +function _objectSpread2$6(target) { for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { + _defineProperty$7(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } return target; } -function _objectWithoutPropertiesLoose$2(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - +function _defineProperty$7(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _objectWithoutPropertiesLoose$b(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; @@ -479,10 +519,10 @@ function _objectWithoutPropertiesLoose$2(source, excluded) { return target; } -function _objectWithoutProperties$2(source, excluded) { +function _objectWithoutProperties$b(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$2(source, excluded); + var target = _objectWithoutPropertiesLoose$b(source, excluded); var key, i; @@ -500,96 +540,246 @@ function _objectWithoutProperties$2(source, excluded) { return target; } -var Button = function Button(_ref) { +var _excluded$b = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + +var ButtonIcon$4 = function ButtonIcon(_ref) { var label = _ref.label, icon = _ref.icon, + iconSize = _ref.iconSize, _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, + design = _ref$design === void 0 ? 'solid' : _ref$design, color = _ref.color, className = _ref.className, loading = _ref.loading, - props = _objectWithoutProperties$2(_ref, ["label", "icon", "design", "color", "className", "loading"]); + props = _objectWithoutProperties$b(_ref, _excluded$b); - var loader = /*#__PURE__*/React__default['default'].createElement("span", { + var loader = /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-loader sui-loading", style: { - position: "relative" + position: 'relative' }, "aria-hidden": "true" }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, icon && "" !== icon && /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-" + icon, + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), "aria-hidden": "true" - }), label); - className = "sui-button".concat(className ? ' ' + className : ''); // Set button color. + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case "gray": + case 'gray': default: - className += ""; + className += ''; break; } // Set button style. switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; - case "solid": + case 'solid': default: - className += ""; + className += ''; break; } // Set loading class. if (loading) { - className += " sui-button-onload"; - } - - var htmlTag = 'button'; - - if (props.href) { - htmlTag = 'a'; - } else if (props.htmlFor) { - htmlTag = 'label'; + className += ' sui-button-onload'; } - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2({ + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$6({ className: className, disabled: props.disabled || loading }, props), loading ? loader : content); }; -function _typeof(obj) { - "@babel/helpers - typeof"; +var _templateObject$3, _templateObject2$2; - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function _typeof(obj) { - return typeof obj; - }; - } else { - _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; +var Link = styled__default["default"].a(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral$3(["\n\t.sui-wrap && {\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\n\t\t[class*=\"sui-icon-\"]:before {\n\t\t\tcolor: inherit !important;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t}\n\t}\n"])), function (props) { + return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; +}, function (props) { + return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; +}); +var Button = styled__default["default"].button(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral$3(["\n\t.sui-wrap && {\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\n\t\t[class*=\"sui-icon-\"]:before {\n\t\t\tcolor: inherit !important;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t}\n\n\t\t&[disabled] {\n\t\t\topacity: 0.5;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n"])), function (props) { + return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; +}, function (props) { + return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; +}); + +var Dropdown = /*#__PURE__*/function (_Component) { + _inherits$3(Dropdown, _Component); + + var _super = _createSuper$3(Dropdown); + + function Dropdown(props) { + var _this; + + _classCallCheck$3(this, Dropdown); + + _this = _super.call(this, props); + _this.state = { + open: false }; + _this.toggle = _this.toggle.bind(_assertThisInitialized$3(_this)); + _this.wrapperRef = /*#__PURE__*/React__default["default"].createRef(); + _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized$3(_this)); + _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized$3(_this)); + return _this; } - return _typeof(obj); -} + _createClass$3(Dropdown, [{ + key: "toggle", + value: function toggle() { + this.setState(function (state) { + return { + open: !state.open + }; + }); + } + }, { + key: "setWrapperRef", + value: function setWrapperRef(node) { + this.wrapperRef = node; + } + }, { + key: "handleClickOutside", + value: function handleClickOutside(e) { + if (this.wrapperRef && !this.wrapperRef.contains(e.target)) { + this.setState({ + open: false + }); + } + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + document.addEventListener('mousedown', this.handleClickOutside); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + document.removeEventListener('mousedown', this.handleClickOutside); + } + }, { + key: "render", + value: function render() { + var _this2 = this; -function _extends$2() { - _extends$2 = Object.assign || function (target) { + var open = this.state.open; + var options = React.Children.map(this.props.children, function (option) { + var icon = option.props.icon && '' !== option.props.icon && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(option.props.icon), + "aria-hidden": "true" + }); + var tag = option.props.tag && '' !== option.props.tag && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-tag sui-tag-beta", + style: { + pointerEvents: 'none', + display: 'inline', + marginLeft: 5, + lineHeight: 1 + } + }, option.props.tag); + var label = /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, icon, option.props.name, tag); + + if (option.props.href) { + return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Link, _extends$a({ + href: option.props.href + }, option.props), label)); + } + + return /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(Button, option.props, label)); + }); + var clazz = !open ? 'sui-dropdown' : 'sui-dropdown open'; + + switch (this.props.position) { + case 'center': + clazz += ' sui-dropdown-center'; + break; + + case 'right': + clazz += ' sui-dropdown-left'; + break; + + default: + clazz += ' sui-dropdown-right'; + break; + } + + return /*#__PURE__*/React__default["default"].createElement("div", { + className: clazz, + ref: this.setWrapperRef, + onClick: function onClick(e) { + return e.stopPropagation(); + } + }, /*#__PURE__*/React__default["default"].createElement(ButtonIcon$4, _extends$a({ + icon: "widget-settings-config", + label: open ? 'Open menu' : 'Close menu', + onClick: this.toggle + }, this.props)), open && /*#__PURE__*/React__default["default"].createElement("ul", { + onClick: function onClick() { + return _this2.setState({ + open: false + }); + } + }, options)); + } + }]); + + return Dropdown; +}(React.Component); + +function _extends$9() { + _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -603,10 +793,10 @@ function _extends$2() { return target; }; - return _extends$2.apply(this, arguments); + return _extends$9.apply(this, arguments); } -function _objectWithoutPropertiesLoose$3(source, excluded) { +function _objectWithoutPropertiesLoose$1$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -621,10 +811,10 @@ function _objectWithoutPropertiesLoose$3(source, excluded) { return target; } -function _objectWithoutProperties$3(source, excluded) { +function _objectWithoutProperties$1$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$3(source, excluded); + var target = _objectWithoutPropertiesLoose$1$2(source, excluded); var key, i; @@ -642,23 +832,26 @@ function _objectWithoutProperties$3(source, excluded) { return target; } -function _slicedToArray(arr, i) { - return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +function _slicedToArray$4(arr, i) { + return _arrayWithHoles$4(arr) || _iterableToArrayLimit$4(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest$4(); } -function _arrayWithHoles(arr) { +function _arrayWithHoles$4(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; +function _iterableToArrayLimit$4(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -677,16 +870,16 @@ function _iterableToArrayLimit(arr, i) { return _arr; } -function _unsupportedIterableToArray(o, minLen) { +function _unsupportedIterableToArray$4(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$4(o, minLen); } -function _arrayLikeToArray(arr, len) { +function _arrayLikeToArray$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -696,158 +889,52 @@ function _arrayLikeToArray(arr, len) { return arr2; } -function _nonIterableRest() { +function _nonIterableRest$4() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -var Modal = function Modal(_ref) { - var modalContent = _ref.modalContent, - triggerContent = _ref.triggerContent, - props = _objectWithoutProperties$3(_ref, ["modalContent", "triggerContent"]); +function ownKeys$5(object, enumerableOnly) { + var keys = Object.keys(object); - var _React$useState = React__default['default'].useState(false), - _React$useState2 = _slicedToArray(_React$useState, 2), - isOpen = _React$useState2[0], - setIsOpen = _React$useState2[1]; + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - var _React$useState3 = React__default['default'].useState(false), - _React$useState4 = _slicedToArray(_React$useState3, 2), - isClosing = _React$useState4[0], - setIsClosing = _React$useState4[1]; // States for sliders. + return keys; +} +function _objectSpread2$5(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { + _defineProperty$6(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } - var _React$useState5 = React__default['default'].useState(props.firstSlide), - _React$useState6 = _slicedToArray(_React$useState5, 2), - currentSlide = _React$useState6[0], - setCurrentSlide = _React$useState6[1]; + return target; +} - var _React$useState7 = React__default['default'].useState(null), - _React$useState8 = _slicedToArray(_React$useState7, 2), - slideDirection = _React$useState8[0], - setSlideDirection = _React$useState8[1]; +function _defineProperty$6(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - React__default['default'].useEffect(function () { - if (!props.dialogId) { - throw new Error('SUI Modal instances should have a `dialogId`'); - } - }, []); - var isSlider = 'object' === _typeof(modalContent) && null !== modalContent; + return obj; +} - var openModal = function openModal() { - return setIsOpen(true); - }, - closeModal = function closeModal() { - // Close the modal with the exit animation and reset the slider. - setIsClosing(true); - setTimeout(function () { - setIsOpen(false); - setIsClosing(false); - - if (isSlider) { - setSlideDirection(null); - setCurrentSlide(props.firstSlide); - } - }, 300); - }, - slideTo = function slideTo(slide) { - var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left'; - setCurrentSlide(slide); - setSlideDirection(direction); - }; - - var _props$getApplication = props.getApplicationNode, - getApplicationNode = _props$getApplication === void 0 ? function () { - return document.getElementsByClassName('sui-wrap')[0]; - } : _props$getApplication; - var dialogClass = "sui-modal-content sui-content-".concat(isClosing ? 'fade-out' : 'fade-in', " ").concat(props.dialogClass || ""); - var renderContent, modalSize, initialFocus; - - if (!isSlider) { - // Not a slider, we can just render the content. - renderContent = modalContent; - modalSize = props.size; - initialFocus = props.initialFocus || false; - } else { - // Render the content from the given slides. - renderContent = modalContent[currentSlide].render; - initialFocus = modalContent[currentSlide].focus || false; - modalSize = modalContent[currentSlide].size; // Add the slide direction class when provided and we're not closing the modal. - - if (slideDirection && !isClosing) { - dialogClass += "sui-modal-slide sui-active sui-fadein-".concat(slideDirection); - } - } // Use 'isOpen' as an alias of 'mounted' if not defined. - - - if ('undefined' === typeof props.mounted) { - props.mounted = isOpen; - } - - var AltModal = props.renderToNode ? AriaModal__default['default'].renderTo(props.renderToNode) : AriaModal__default['default']; - return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AltModal, _extends$2({ - getApplicationNode: getApplicationNode, - dialogClass: dialogClass, - underlayClass: "sui-modal sui-active sui-modal-".concat(modalSize || 'md', " sui-wrap ").concat(props.underlayClass || ''), - includeDefaultStyles: false, - initialFocus: initialFocus - }, props), renderContent({ - closeModal: closeModal, - slideTo: slideTo - })), triggerContent && triggerContent({ - openModal: openModal - })); -}; - -function _defineProperty$1(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - -function ownKeys$1(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$1(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys$1(Object(source), true).forEach(function (key) { - _defineProperty$1(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$1(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } - } - - return target; -} - -function _objectWithoutPropertiesLoose$4(source, excluded) { +function _objectWithoutPropertiesLoose$a(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -862,10 +949,10 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { return target; } -function _objectWithoutProperties$4(source, excluded) { +function _objectWithoutProperties$a(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$4(source, excluded); + var target = _objectWithoutPropertiesLoose$a(source, excluded); var key, i; @@ -883,97 +970,172 @@ function _objectWithoutProperties$4(source, excluded) { return target; } -var ButtonIcon = function ButtonIcon(_ref) { +var _excluded$1$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + +var ButtonIcon$3 = function ButtonIcon(_ref) { var label = _ref.label, icon = _ref.icon, iconSize = _ref.iconSize, _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, + design = _ref$design === void 0 ? 'solid' : _ref$design, color = _ref.color, className = _ref.className, loading = _ref.loading, - props = _objectWithoutProperties$4(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); + props = _objectWithoutProperties$a(_ref, _excluded$1$2); - var loader = /*#__PURE__*/React__default['default'].createElement("span", { + var loader = /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-loader sui-loading", style: { - position: "relative" + position: 'relative' }, "aria-hidden": "true" }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", { + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { + }), /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-screen-reader-text" }, label)); className = "sui-button-icon ".concat(className || ''); // Set button color. switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case "gray": + case 'gray': default: - className += ""; + className += ''; break; } // Set button style. switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; - case "solid": + case 'solid': default: - className += ""; + className += ''; break; } // Set loading class. if (loading) { - className += " sui-button-onload"; + className += ' sui-button-onload'; } var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2$1({ + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$5({ className: className, disabled: props.disabled || loading }, props), loading ? loader : content); }; -function _typeof$1(obj) { - "@babel/helpers - typeof"; +var _excluded$a = ["id", "label", "description", "type", "errorStatus", "errorDescription", "size", "fieldSize", "suffix", "prefix"]; - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof$1 = function (obj) { - return typeof obj; - }; - } else { - _typeof$1 = function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; +var Input = function Input(_ref) { + var id = _ref.id, + label = _ref.label, + description = _ref.description, + _ref$type = _ref.type, + type = _ref$type === void 0 ? 'text' : _ref$type, + errorStatus = _ref.errorStatus, + errorDescription = _ref.errorDescription, + size = _ref.size, + fieldSize = _ref.fieldSize, + suffix = _ref.suffix, + prefix = _ref.prefix, + props = _objectWithoutProperties$1$2(_ref, _excluded$a); + + var uniqueId = id && '' !== id ? id : props.property; + + var _useState = React.useState(true), + _useState2 = _slicedToArray$4(_useState, 2), + showIcon = _useState2[0], + setShowIcon = _useState2[1]; + + var fieldClasses = 'sui-form-field'; + + switch (fieldSize) { + case 'sm': + case 'small': + fieldClasses += ' sui-input-sm'; + break; + + case 'md': + case 'medium': + fieldClasses += ' sui-input-md'; + break; } - return _typeof$1(obj); -} + if (errorStatus) { + fieldClasses += ' sui-form-field-error'; + } -function _classCallCheck(instance, Constructor) { + var inputClasses = 'sui-form-control'; + suffix && (inputClasses += ' sui-field-has-suffix'); + prefix && (inputClasses += ' sui-field-has-prefix'); + + switch (size) { + case 'sm': + case 'small': + inputClasses += ' sui-input-sm'; + break; + + case 'md': + case 'medium': + inputClasses += ' sui-input-md'; + break; + } + + return /*#__PURE__*/React__default["default"].createElement("div", { + className: fieldClasses + }, label && /*#__PURE__*/React__default["default"].createElement("label", { + htmlFor: uniqueId, + className: "sui-label" + }, label), prefix && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-field-prefix" + }, prefix), type === 'password' ? /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-with-button sui-with-button-icon" + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$9({ + id: uniqueId, + type: showIcon ? type : 'text', + className: inputClasses + }, props)), /*#__PURE__*/React__default["default"].createElement(ButtonIcon$3, { + icon: showIcon ? "eye" : "eye-hide", + label: showIcon ? "Show password" : "Hide password", + onClick: function onClick() { + setShowIcon(!showIcon); + } + })) : /*#__PURE__*/React__default["default"].createElement("input", _extends$9({ + id: uniqueId, + type: type, + className: inputClasses + }, props)), suffix && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-field-suffix" + }, suffix), errorStatus && errorDescription && /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-error-message" + }, errorDescription), description && /*#__PURE__*/React__default["default"].createElement("p", { + className: "sui-description" + }, description)); +}; + +function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _defineProperties(target, props) { +function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; @@ -983,13 +1145,16 @@ function _defineProperties(target, props) { } } -function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); +function _createClass$2(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$2(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } -function _defineProperty$2(obj, key, value) { +function _defineProperty$1$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, @@ -1004,25 +1169,7 @@ function _defineProperty$2(obj, key, value) { return obj; } -function _extends$3() { - _extends$3 = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends$3.apply(this, arguments); -} - -function _inherits(subClass, superClass) { +function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } @@ -1034,39 +1181,42 @@ function _inherits(subClass, superClass) { configurable: true } }); - if (superClass) _setPrototypeOf(subClass, superClass); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$2(subClass, superClass); } -function _getPrototypeOf(o) { - _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { +function _getPrototypeOf$2(o) { + _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; - return _getPrototypeOf(o); + return _getPrototypeOf$2(o); } -function _setPrototypeOf(o, p) { - _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { +function _setPrototypeOf$2(o, p) { + _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; - return _setPrototypeOf(o, p); + return _setPrototypeOf$2(o, p); } -function _isNativeReflectConstruct() { +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function _assertThisInitialized(self) { +function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } @@ -1074,487 +1224,341 @@ function _assertThisInitialized(self) { return self; } -function _possibleConstructorReturn(self, call) { +function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); } - return _assertThisInitialized(self); + return _assertThisInitialized$2(self); } -function _createSuper(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct(); +function _createSuper$2(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { - var Super = _getPrototypeOf(Derived), + var Super = _getPrototypeOf$2(Derived), result; if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf(this).constructor; + var NewTarget = _getPrototypeOf$2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } - return _possibleConstructorReturn(this, result); + return _possibleConstructorReturn$2(this, result); }; } -function _taggedTemplateLiteral$1(strings, raw) { - if (!raw) { - raw = strings.slice(0); +function ownKeys$4(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); } - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } - })); + return keys; } -function _templateObject8() { - var data = _taggedTemplateLiteral$1(["\n\tmin-width: 1px;\n\tflex: 1;\n\t", "\n\tcolor: #17A8E3 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px !important;\n"]); - - _templateObject8 = function _templateObject8() { - return data; - }; +function _objectSpread2$4(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { + _defineProperty$5(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } - return data; + return target; } -function _templateObject7() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: block;\n\t", "\n\n\tp {\n\t\toverflow: hidden;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\tborder: 0;\n\t\tcolor: #888 !important;\n\t\tfont-size: 13px !important;\n\t\tline-height: 22px !important;\n\t\tletter-spacing: -0.2px;\n\t\t-webkit-line-clamp: ", ";\n\t}\n"]); - - _templateObject7 = function _templateObject7() { - return data; - }; +function _defineProperty$5(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - return data; + return obj; } -function _templateObject6() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\tmargin: 0 !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tcolor: #888 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tletter-spacing: -0.2px;\n\n\t", "\n"]); +function _objectWithoutPropertiesLoose$9(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject6 = function _templateObject6() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -function _templateObject5() { - var data = _taggedTemplateLiteral$1(["\n\toverflow: hidden;\n\tdisplay: -webkit-box !important;\n\t-webkit-box-orient: vertical;\n\t", "\n\tmargin: ", " !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px;\n\t", "\n\n\t", "\n"]); +function _objectWithoutProperties$9(source, excluded) { + if (source == null) return {}; - _templateObject5 = function _templateObject5() { - return data; - }; + var target = _objectWithoutPropertiesLoose$9(source, excluded); - return data; -} + var key, i; -function _templateObject4() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\theight: ", ";\n\tmargin: ", ";\n\t", "\n\tdisplay: block;\n\t", "\n\tbackground-color: #FFF;\n\tbackground-image: url(", ");\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n"]); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - _templateObject4 = function _templateObject4() { - return data; - }; + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - return data; + return target; } -function _templateObject3$1() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-flow: row wrap;\n\talign-items: center;\n\tmargin-top: 15px;\n"]); +var _excluded$9 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - _templateObject3$1 = function _templateObject3() { - return data; - }; +var ButtonIcon$2 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$9(_ref, _excluded$9); - return data; -} + var loader = /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. -function _templateObject2$1() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: flex;\n\tflex-flow: row wrap;\n\n\t+ div {\n\t\tmargin-top: 20px;\n\t}\n"]); + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; - _templateObject2$1 = function _templateObject2() { - return data; - }; + case 'gray': + default: + className += ''; + break; + } // Set button style. - return data; -} -function _templateObject$1() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\tcursor: pointer;\n\t", "\n\t", "\n\tpadding: ", ";\n\tborder-radius: 4px;\n\tbackground-color: #fff;\n\t", "\n\ttransition: 0.2s ease all;\n\n\t* {\n\t\tpointer-events: none;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t", "\n\n\t\t", "\n\t}\n\n\t", "\n\n\t&:focus {\n\t\toutline: none;\n\t\t", "\n\t}\n\n\t@media ", " {\n\t\t", "\n\t}\n"]); + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; - _templateObject$1 = function _templateObject() { - return data; - }; + case 'solid': + default: + className += ''; + break; + } // Set loading class. - return data; -} -var aria = aria || {}; -aria.KeyCode = { - TAB: 9, - RETURN: 13, - ESC: 27, - SPACE: 32, - PAGE_UP: 33, - PAGE_DOWN: 34, - END: 35, - HOME: 36, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - DELETE: 46 -}; -var screen$1 = { - mobile: 480, - tablet: 783, - laptop: 1200, - desktop: 1500 -}; -var device$1 = { - mobile: "(min-width: ".concat(screen$1.mobile, "px)"), - tablet: "(min-width: ".concat(screen$1.tablet, "px)"), - laptop: "(min-width: ".concat(screen$1.laptop, "px)"), - desktop: "(min-width: ".concat(screen$1.desktop, "px)") + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$4({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -var PostWrapper = styled__default['default'].div.attrs(function (props) { - return { - tabIndex: 0, - props: props - }; -})(_templateObject$1(), function (props) { - return props.banner ? "overflow: hidden;" : ""; -}, function (props) { - return props.banner ? "display: flex;" : ""; -}, function (props) { - return props.banner ? "flex-flow: column nowrap;" : ""; -}, function (props) { - return props.banner ? "20px 20px 30px" : "10px"; -}, function (props) { - return props.banner ? "box-shadow: 0 0 0 1px #E6E6E6;" : ""; -}, function (props) { - return props.banner ? "transform: scale(1.02);" : "background-color: #FAFAFA;"; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t\ttransform: scale(1.05);\n\t\t\t}") : ""; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\tbox-shadow: 0 2px 7px 0 rgba(0,0,0,0.05);\n\t\t}") : ""; -}, function (props) { - return props.banner ? "box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;" : ""; -}, device$1.tablet, function (props) { - return props.banner ? "min-height: 100%;" : "padding: 15px;"; -}); -var PostHeader = styled__default['default'].div(_templateObject2$1()); -var PostFooter = styled__default['default'].div(_templateObject3$1()); -var FeaturedImage = styled__default['default'].div.attrs(function () { - return { - tabIndex: "-1", - "aria-hidden": true - }; -})(_templateObject4(), function (props) { - return props.banner ? "" : "width: 66px;"; -}, function (props) { - return props.banner ? "140px" : "54px"; -}, function (props) { - return props.banner ? "-20px -20px 20px" : "0 10px 0 0"; -}, function (props) { - return props.banner ? "" : "border-radius: 4px;"; -}, function (props) { - return props.banner ? "flex: 0 0 auto;" : ""; -}, function (props) { - return props.src || "none"; -}); -var PostTitle = styled__default['default'].h3(_templateObject5(), function (props) { - return props.banner ? "flex: 1 1 auto;" : ""; -}, function (props) { - return props.banner ? "0 0 10px" : "0"; -}, function (props) { - return props.banner ? "" : "-webkit-line-clamp: 2;"; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t-webkit-line-clamp: 2;\n\t\t}") : ""; -}); -var PostTime = styled__default['default'].p(_templateObject6(), function (props) { - return props.banner ? "flex: 0 0 auto;" : ""; -}, function (props) { - return props.banner ? "* + & {\n\t\t\tmargin-left: 5px !important;\n\t\t}" : ""; -}); -var Excerpt = styled__default['default'].div(_templateObject7(), function (props) { - return props.banner ? "flex: 1 1 auto;" : ""; -}, function (props) { - return props.banner ? "3" : "2"; -}); -var ReadMore = styled__default['default'].p(_templateObject8(), function (props) { - return props.banner ? "" : "margin: 4px 0 0;"; -}); -var Post = /*#__PURE__*/function (_Component) { - _inherits(Post, _Component); +var Notifications = /*#__PURE__*/function (_Component) { + _inherits$2(Notifications, _Component); - var _super = _createSuper(Post); + var _super = _createSuper$2(Notifications); - function Post(props) { + function Notifications(props) { var _this; - _classCallCheck(this, Post); + _classCallCheck$2(this, Notifications); _this = _super.call(this, props); - _defineProperty$2(_assertThisInitialized(_this), "openLink", function (e) { - var ref = e.target !== null ? e.target : e.srcElement; - - if (ref) { - window.open(ref.getAttribute("data-href"), "_blank"); - } - }); - - _defineProperty$2(_assertThisInitialized(_this), "handleKeydown", function (e) { - var key = e.which || e.keyCode; - - switch (key) { - case aria.KeyCode.RETURN: - _this.openLink(e); + _defineProperty$1$1(_assertThisInitialized$2(_this), "close", function () { + _this.setState({ + hide: true + }); - break; - } + _this.props.cbFunction ? _this.props.cbFunction() : ''; }); _this.state = { - media: [], - error: null, - isLoaded: false + hide: false }; - _this.openLink = _this.openLink.bind(_assertThisInitialized(_this)); - _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this)); + _this.close = _this.close.bind(_assertThisInitialized$2(_this)); return _this; } - _createClass(Post, [{ - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var API_URL = "https://wpmudev.com/blog/wp-json/wp/v2/media/"; - var QUERY_ID = this.props.media; // GET media using fetch. - - fetch(API_URL + QUERY_ID).then(function (response) { - return response.json(); - }).then(function (data) { - _this2.setState({ - isLoaded: true, - media: data.guid.rendered - }); - }, function (error) { - _this2.setState({ - isLoaded: true, - error: error - }); - }); - } - }, { + _createClass$2(Notifications, [{ key: "render", value: function render() { - var _this$state = this.state, - media = _this$state.media, - error = _this$state.error, - isLoaded = _this$state.isLoaded; - var translate = this.props.translate; - var read_article = translate && translate[0].read_article ? translate[0].read_article : "Read article"; - var min_read = translate && translate[0].min_read ? translate[0].min_read : "min read"; - var PostImage = ""; // Empty. + var _this2 = this; - if (this.props.image) { - PostImage = /*#__PURE__*/React__default['default'].createElement(FeaturedImage, _extends$3({ - src: this.props.image, - alt: "" - }, this.props)); - } else { - if (error) { - PostImage = error.message; - } else if (!isLoaded) { - PostImage = /*#__PURE__*/React__default['default'].createElement("p", { - style: { - textAlign: 'center' - } - }, /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-loader sui-loading", - "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-screen-reader-text" - }, "Image is loading")); - } else { - PostImage = /*#__PURE__*/React__default['default'].createElement(FeaturedImage, _extends$3({ - src: media - }, this.props)); - } - } + var hide = this.state.hide; + var classMain = 'sui-notice'; + var classIcon = 'sui-notice-icon sui-md'; - if (this.props.banner) { - return /*#__PURE__*/React__default['default'].createElement(PostWrapper, this.props, PostImage, this.props.title && "" !== this.props.title && /*#__PURE__*/React__default['default'].createElement(PostTitle, { - banner: true, - dangerouslySetInnerHTML: { - __html: this.props.title + switch (this.props.type) { + case 'info': + case 'success': + case 'warning': + case 'error': + case 'upsell': + classMain += ' sui-notice-' + this.props.type; + + if (this.props.loading) { + classIcon += ' sui-icon-loader sui-loading'; + } else { + classIcon += ' sui-icon-info'; } - }), this.props.excerpt && "" !== this.props.excerpt && /*#__PURE__*/React__default['default'].createElement(Excerpt, { - banner: true, - dangerouslySetInnerHTML: { - __html: this.props.excerpt + + break; + + default: + if (this.props.loading) { + classIcon += ' sui-icon-loader sui-loading'; + } else { + classIcon += ' sui-icon-info'; } - }), /*#__PURE__*/React__default['default'].createElement(PostFooter, { - banner: true - }, /*#__PURE__*/React__default['default'].createElement(ReadMore, { - banner: true - }, read_article), this.props.time && "" !== this.props.time && /*#__PURE__*/React__default['default'].createElement(PostTime, { - banner: true - }, /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-clock sui-sm", - style: { - verticalAlign: "middle", - marginRight: 5 - }, - "aria-hidden": "true" - }), this.props.time, " ", min_read))); + + break; } - return /*#__PURE__*/React__default['default'].createElement(PostWrapper, this.props, /*#__PURE__*/React__default['default'].createElement(PostHeader, null, PostImage, /*#__PURE__*/React__default['default'].createElement("div", { - style: { - minWidth: "1px", - flex: 1 - } - }, this.props.title && "" !== this.props.title && /*#__PURE__*/React__default['default'].createElement(PostTitle, { - dangerouslySetInnerHTML: { - __html: this.props.title - } - }), this.props.time && "" !== this.props.time && /*#__PURE__*/React__default['default'].createElement(PostTime, null, "*", this.props.time, " ", min_read))), this.props.excerpt && "" !== this.props.excerpt && /*#__PURE__*/React__default['default'].createElement(Excerpt, { - dangerouslySetInnerHTML: { - __html: this.props.excerpt + var lang = Object.assign({ + dismiss: 'Hide Notification' + }, this.props.sourceLang); + var message = /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-notice-message" + }, /*#__PURE__*/React__default["default"].createElement("span", { + className: classIcon, + "aria-hidden": "true" + }), this.props.children); + var actions = /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-notice-actions" + }, /*#__PURE__*/React__default["default"].createElement(ButtonIcon$2, { + icon: "check", + label: lang.dismiss, + onClick: function onClick(e) { + return _this2.close(e); } - }), /*#__PURE__*/React__default['default'].createElement(ReadMore, null, read_article)); + })); + + if (!hide) { + return /*#__PURE__*/React__default["default"].createElement("div", { + className: classMain + }, /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-notice-content" + }, message, this.props.dismiss && actions)); + } + + return null; } }]); - return Post; + return Notifications; }(React.Component); -function _classCallCheck$1(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); +function ownKeys$3(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); } + + return keys; } -function _defineProperties$1(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); +function _objectSpread2$3(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { + _defineProperty$4(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } -} -function _createClass$1(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); - if (staticProps) _defineProperties$1(Constructor, staticProps); - return Constructor; -} - -function _defineProperty$3(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - -function _inherits$1(subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function"); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true - } - }); - if (superClass) _setPrototypeOf$1(subClass, superClass); -} - -function _getPrototypeOf$1(o) { - _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf$1(o); -} - -function _setPrototypeOf$1(o, p) { - _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf$1(o, p); + return target; } -function _isNativeReflectConstruct$1() { - if (typeof Reflect === "undefined" || !Reflect.construct) return false; - if (Reflect.construct.sham) return false; - if (typeof Proxy === "function") return true; - +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); - return true; - } catch (e) { - return false; - } -} - -function _assertThisInitialized$1(self) { - if (self === void 0) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + var info = gen[key](arg); + var value = info.value; + } catch (error) { + reject(error); + return; } - return self; -} - -function _possibleConstructorReturn$1(self, call) { - if (call && (_typeof$1(call) === "object" || typeof call === "function")) { - return call; + if (info.done) { + resolve(value); + } else { + Promise.resolve(value).then(_next, _throw); } - - return _assertThisInitialized$1(self); } -function _createSuper$1(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); - - return function _createSuperInternal() { - var Super = _getPrototypeOf$1(Derived), - result; +function _asyncToGenerator(fn) { + return function () { + var self = this, + args = arguments; + return new Promise(function (resolve, reject) { + var gen = fn.apply(self, args); - if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf$1(this).constructor; + function _next(value) { + asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + } - result = Reflect.construct(Super, arguments, NewTarget); - } else { - result = Super.apply(this, arguments); - } + function _throw(err) { + asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + } - return _possibleConstructorReturn$1(this, result); + _next(undefined); + }); }; } -function _defineProperty$1$1(obj, key, value) { +function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, @@ -1569,41 +1573,25 @@ function _defineProperty$1$1(obj, key, value) { return obj; } -function ownKeys$2(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$2(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; +function _extends$8() { + _extends$8 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - if (i % 2) { - ownKeys$2(Object(source), true).forEach(function (key) { - _defineProperty$1$1(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$2(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } } - } - return target; + return target; + }; + + return _extends$8.apply(this, arguments); } -function _objectWithoutPropertiesLoose$5(source, excluded) { +function _objectWithoutPropertiesLoose$8(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -1618,10 +1606,10 @@ function _objectWithoutPropertiesLoose$5(source, excluded) { return target; } -function _objectWithoutProperties$5(source, excluded) { +function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$5(source, excluded); + var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; @@ -1639,165 +1627,342 @@ function _objectWithoutProperties$5(source, excluded) { return target; } -var ButtonIcon$1 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$5(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); - - var loader = /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, - "aria-hidden": "true" - }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), - "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-screen-reader-text" - }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. - - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; - - case "gray": - default: - className += ""; - break; - } // Set button style. +function _slicedToArray$3(arr, i) { + return _arrayWithHoles$3(arr) || _iterableToArrayLimit$3(arr, i) || _unsupportedIterableToArray$3(arr, i) || _nonIterableRest$3(); +} +function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$3(arr) || _nonIterableSpread(); +} - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return _arrayLikeToArray$3(arr); +} - case "solid": - default: - className += ""; - break; - } // Set loading class. +function _arrayWithHoles$3(arr) { + if (Array.isArray(arr)) return arr; +} +function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); +} - if (loading) { - className += " sui-button-onload"; - } +function _iterableToArrayLimit$3(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2$2({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; + if (_i == null) return; + var _arr = []; + var _n = true; + var _d = false; -var Notifications = /*#__PURE__*/function (_Component) { - _inherits$1(Notifications, _Component); + var _s, _e; - var _super = _createSuper$1(Notifications); + try { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); - function Notifications(props) { - var _this; + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } - _classCallCheck$1(this, Notifications); + return _arr; +} - _this = _super.call(this, props); +function _unsupportedIterableToArray$3(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); +} - _defineProperty$3(_assertThisInitialized$1(_this), "close", function () { - _this.setState({ - hide: true - }); - }); +function _arrayLikeToArray$3(arr, len) { + if (len == null || len > arr.length) len = arr.length; - _this.state = { - hide: false - }; - _this.close = _this.close.bind(_assertThisInitialized$1(_this)); - return _this; + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; } - _createClass$1(Notifications, [{ - key: "render", - value: function render() { - var _this2 = this; + return arr2; +} - var hide = this.state.hide; - var classMain = "sui-notice"; - var classIcon = "sui-notice-icon sui-md"; +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} - switch (this.props.type) { - case "info": - case "success": - case "warning": - case "error": - case "upsell": - classMain += " sui-notice-" + this.props.type; - classIcon += " sui-icon-info"; - break; +function _nonIterableRest$3() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} - case "loading": - classIcon += " sui-icon-loader sui-loading"; - break; +var _excluded$8 = ["limit", "skip", "results", "skipToFirstLabel", "previousLabel", "nextLabel", "skipToLastLabel", "pagesToBottom"]; - default: - classIcon += " sui-icon-info"; - break; - } +var Pagination = function Pagination(_ref) { + var _componentWrapper$pro, _componentWrapper$pro2, _componentWrapper$pro3; - var message = /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-notice-message" - }, /*#__PURE__*/React__default['default'].createElement("span", { - className: classIcon, - "aria-hidden": "true" - }), this.props.children); - var actions = /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-notice-actions" - }, /*#__PURE__*/React__default['default'].createElement(ButtonIcon$1, { - icon: "check", - label: "Hide", - onClick: function onClick(e) { - return _this2.close(e); - } - })); + var limit = _ref.limit, + skip = _ref.skip, + results = _ref.results, + skipToFirstLabel = _ref.skipToFirstLabel, + previousLabel = _ref.previousLabel, + nextLabel = _ref.nextLabel, + skipToLastLabel = _ref.skipToLastLabel, + pagesToBottom = _ref.pagesToBottom, + args = _objectWithoutProperties$8(_ref, _excluded$8); - if (!hide) { - return /*#__PURE__*/React__default['default'].createElement("div", { - className: classMain - }, /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-notice-content" - }, message, this.props.dismiss && actions)); - } + var componentWrapper = args.children, + componentChildren = componentWrapper !== null && componentWrapper !== void 0 && (_componentWrapper$pro = componentWrapper.props) !== null && _componentWrapper$pro !== void 0 && _componentWrapper$pro.children ? (componentWrapper === null || componentWrapper === void 0 ? void 0 : (_componentWrapper$pro2 = componentWrapper.props) === null || _componentWrapper$pro2 === void 0 ? void 0 : (_componentWrapper$pro3 = _componentWrapper$pro2.children) === null || _componentWrapper$pro3 === void 0 ? void 0 : _componentWrapper$pro3.length) > 1 ? _toConsumableArray(componentWrapper.props.children) : [componentWrapper.props.children] : [], + childElements = [].concat(componentChildren), + elements = childElements.length, + pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit, + _useState = React.useState([]), + _useState2 = _slicedToArray$3(_useState, 2), + pagesArray = _useState2[0], + setPagesArray = _useState2[1], + _useState3 = React.useState('1'), + _useState4 = _slicedToArray$3(_useState3, 2), + selectedPage = _useState4[0], + setSelectedPage = _useState4[1], + _useState5 = React.useState(0), + _useState6 = _slicedToArray$3(_useState5, 2), + startIndex = _useState6[0], + setStartIndex = _useState6[1], + _useState7 = React.useState(pages >= 5 ? 5 : pages), + _useState8 = _slicedToArray$3(_useState7, 2), + endIndex = _useState8[0], + setEndIndex = _useState8[1], + _useState9 = React.useState(0), + _useState10 = _slicedToArray$3(_useState9, 2), + pageClickCounter = _useState10[0], + setPageClickCounter = _useState10[1], + _useState11 = React.useState(0), + _useState12 = _slicedToArray$3(_useState11, 2), + elementsStartIndex = _useState12[0], + setElementsStartIndex = _useState12[1], + _useState13 = React.useState(limit), + _useState14 = _slicedToArray$3(_useState13, 2), + elementsEndIndex = _useState14[0], + setElementsEndIndex = _useState14[1]; - return null; + React.useEffect(function () { + var pagesArray = []; + + for (var i = 1; i <= pages; ++i) { + pagesArray.push(i); } - }]); - return Notifications; -}(React.Component); + setPagesArray(pagesArray); + }, []); + React.useEffect(function () { + selectedPage >= endIndex && incrementIndexes(); + selectedPage <= startIndex + 1 && decrementIndexes(); + }, [pageClickCounter]); + React.useEffect(function () { + if (selectedPage !== '1') { + setElementsStartIndex(selectedPage * limit - limit); + setElementsEndIndex(selectedPage * limit); + } + }, [selectedPage]); -function _classCallCheck$2(instance, Constructor) { + var handleSkipToFirstPage = function handleSkipToFirstPage() { + setSelectedPage(1); + setStartIndex(0); + setEndIndex(pages >= 5 ? 5 : pages); + }; + + var handleSkipToLastPage = function handleSkipToLastPage() { + setSelectedPage(pages); + setStartIndex(pages >= 5 ? pages - 5 : 0); + setEndIndex(pages); + }; + + var handlePreviousPage = function handlePreviousPage() { + selectedPage > 1 && setSelectedPage(selectedPage - 1); + decrementIndexes(); + }; + + var handleNextPage = function handleNextPage() { + selectedPage < pages && setSelectedPage(parseInt(selectedPage) + 1); + incrementIndexes(); + }; + + var decrementIndexes = function decrementIndexes() { + if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) { + setStartIndex(startIndex - 1); + setEndIndex(endIndex - 1); + } + }; + + var incrementIndexes = function incrementIndexes() { + if (selectedPage + 1 >= endIndex && endIndex !== pages) { + setStartIndex(startIndex + 1); + setEndIndex(endIndex + 1); + } + }; + + var handlePreviousEllipsis = function handlePreviousEllipsis() { + setSelectedPage(startIndex >= 5 ? endIndex - 6 : endIndex - startIndex - 1); + setStartIndex(startIndex >= 5 ? startIndex - 5 : 0); + setEndIndex(startIndex >= 5 ? endIndex - 5 : endIndex - startIndex); + }; + + var handleNextEllipsis = function handleNextEllipsis() { + setSelectedPage(pages - endIndex >= 5 ? startIndex + 7 : pages - endIndex + startIndex + 2); + setStartIndex(pages - endIndex >= 5 ? startIndex + 5 : pages - endIndex + startIndex); + setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages); + }; + + var handlePageClick = /*#__PURE__*/function () { + var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(page) { + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + setSelectedPage(page); + setPageClickCounter(pageClickCounter + 1); + + case 2: + case "end": + return _context.stop(); + } + } + }, _callee); + })); + + return function handlePageClick(_x) { + return _ref2.apply(this, arguments); + }; + }(); + + var properties = { + componentWrapper: componentWrapper, + childElements: childElements, + elementsStartIndex: elementsStartIndex, + elementsEndIndex: elementsEndIndex, + handlePageClick: handlePageClick, + handleNextEllipsis: handleNextEllipsis, + handlePreviousEllipsis: handlePreviousEllipsis, + handleNextPage: handleNextPage, + handlePreviousPage: handlePreviousPage, + handleSkipToLastPage: handleSkipToLastPage, + handleSkipToFirstPage: handleSkipToFirstPage, + pagesArray: pagesArray, + selectedPage: selectedPage, + startIndex: startIndex, + endIndex: endIndex, + pages: pages, + skipToFirstLabel: skipToFirstLabel, + previousLabel: previousLabel, + nextLabel: nextLabel, + skipToLastLabel: skipToLastLabel, + skip: skip, + results: results, + elements: elements + }; + if (args !== null && args !== void 0 && args.paginationContent) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, args === null || args === void 0 ? void 0 : args.paginationContent(_objectSpread2$3({}, properties)));else return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pagesToBottom && PaginationResults(_objectSpread2$3({}, properties)), PaginationNav(_objectSpread2$3({}, properties)), !pagesToBottom && PaginationResults(_objectSpread2$3({}, properties))); +}; + +var PaginationResults = function PaginationResults(_ref3) { + var _React$Children$map; + + var properties = _extends$8({}, _ref3); + + var items = (_React$Children$map = React__default["default"].Children.map(properties.childElements, function (data) { + return /*#__PURE__*/React__default["default"].cloneElement(data); + })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.slice(properties.elementsStartIndex, properties.elementsEndIndex); + return React__default["default"].Children.map(properties.componentWrapper, function (data) { + return /*#__PURE__*/React__default["default"].cloneElement(data, '', items); + }); +}; + +var PaginationNav = function PaginationNav(_ref4) { + var _properties$pagesArra, _properties$pagesArra2; + + var properties = _extends$8({}, _ref4); + + return properties.pagesArray.length > 1 && /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-pagination-wrap" + }, properties.results && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-pagination-results" + }, properties.elements, " results"), /*#__PURE__*/React__default["default"].createElement("ul", { + className: "sui-pagination" + }, properties.skip && /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handleSkipToFirstPage + }, /*#__PURE__*/React__default["default"].createElement("a", { + disabled: properties.selectedPage <= 1 + }, /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.skipToFirstLabel || 'Go to first page'), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true", + title: properties.skipToFirstLabel || 'Go to first page', + className: "sui-icon-arrow-skip-back" + }))), /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handlePreviousPage + }, /*#__PURE__*/React__default["default"].createElement("a", { + disabled: properties.selectedPage <= 1 + }, /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.previousLabel || 'Go to previous page'), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true", + title: properties.previousLabel || 'Go to previous page', + className: "sui-icon-chevron-left" + }))), properties.startIndex > 0 && /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handlePreviousEllipsis + }, /*#__PURE__*/React__default["default"].createElement("a", null, "\u2026")), (_properties$pagesArra = properties.pagesArray) === null || _properties$pagesArra === void 0 ? void 0 : (_properties$pagesArra2 = _properties$pagesArra.slice(properties.startIndex, properties.endIndex)) === null || _properties$pagesArra2 === void 0 ? void 0 : _properties$pagesArra2.map(function (data, index) { + return /*#__PURE__*/React__default["default"].createElement("li", { + onClick: function onClick() { + return properties.handlePageClick(parseInt(data)); + }, + key: index + }, /*#__PURE__*/React__default["default"].createElement("a", { + "aria-selected": properties.selectedPage === data, + className: properties.selectedPage == data ? 'sui-active' : '' + }, data)); + }), properties.endIndex < properties.pages && /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handleNextEllipsis + }, /*#__PURE__*/React__default["default"].createElement("a", null, "\u2026")), /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handleNextPage + }, /*#__PURE__*/React__default["default"].createElement("a", { + disabled: properties.selectedPage >= properties.pages + }, /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.nextLabel || 'Go to next page.'), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true", + title: properties.nextLabel || 'Go to next page.', + className: "sui-icon-chevron-right" + }))), properties.skip && /*#__PURE__*/React__default["default"].createElement("li", { + onClick: properties.handleSkipToLastPage + }, /*#__PURE__*/React__default["default"].createElement("a", { + disabled: properties.selectedPage >= properties.pages + }, /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.skipToLastLabel || 'Go to last page.'), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true", + title: properties.skipToLastLabel || 'Go to last page', + className: "sui-icon-arrow-skip-forward" + }))))); +}; + +function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _defineProperties$2(target, props) { +function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; @@ -1807,14 +1972,32 @@ function _defineProperties$2(target, props) { } } -function _createClass$2(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); - if (staticProps) _defineProperties$2(Constructor, staticProps); +function _createClass$1(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$1(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } -function _extends$4() { - _extends$4 = Object.assign || function (target) { +function _defineProperty$3(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _extends$7() { + _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -1828,10 +2011,10 @@ function _extends$4() { return target; }; - return _extends$4.apply(this, arguments); + return _extends$7.apply(this, arguments); } -function _inherits$2(subClass, superClass) { +function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } @@ -1843,39 +2026,42 @@ function _inherits$2(subClass, superClass) { configurable: true } }); - if (superClass) _setPrototypeOf$2(subClass, superClass); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$1(subClass, superClass); } -function _getPrototypeOf$2(o) { - _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { +function _getPrototypeOf$1(o) { + _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; - return _getPrototypeOf$2(o); + return _getPrototypeOf$1(o); } -function _setPrototypeOf$2(o, p) { - _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { +function _setPrototypeOf$1(o, p) { + _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; - return _setPrototypeOf$2(o, p); + return _setPrototypeOf$1(o, p); } -function _isNativeReflectConstruct$2() { +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function _assertThisInitialized$2(self) { +function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } @@ -1883,30 +2069,32 @@ function _assertThisInitialized$2(self) { return self; } -function _possibleConstructorReturn$2(self, call) { +function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); } - return _assertThisInitialized$2(self); + return _assertThisInitialized$1(self); } -function _createSuper$2(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); +function _createSuper$1(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { - var Super = _getPrototypeOf$2(Derived), + var Super = _getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf$2(this).constructor; + var NewTarget = _getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } - return _possibleConstructorReturn$2(this, result); + return _possibleConstructorReturn$1(this, result); }; } @@ -1922,56 +2110,303 @@ function _taggedTemplateLiteral$2(strings, raw) { })); } -function _defineProperty$4(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true +var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; + +var aria = aria || {}; +aria.KeyCode = { + TAB: 9, + RETURN: 13, + ESC: 27, + SPACE: 32, + PAGE_UP: 33, + PAGE_DOWN: 34, + END: 35, + HOME: 36, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + DELETE: 46 +}; +var screen$1 = { + mobile: 480, + tablet: 783, + laptop: 1200, + desktop: 1500 +}; +var device$1 = { + mobile: "(min-width: ".concat(screen$1.mobile, "px)"), + tablet: "(min-width: ".concat(screen$1.tablet, "px)"), + laptop: "(min-width: ".concat(screen$1.laptop, "px)"), + desktop: "(min-width: ".concat(screen$1.desktop, "px)") +}; +var PostWrapper = styled__default["default"].div.attrs(function (props) { + return { + tabIndex: 0, + props: props + }; +})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral$2(["\n\t", "\n\tcursor: pointer;\n\t", "\n\t", "\n\tpadding: ", ";\n\tborder-radius: 4px;\n\tbackground-color: #fff;\n\t", "\n\ttransition: 0.2s ease all;\n\n\t* {\n\t\tpointer-events: none;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t", "\n\n\t\t", "\n\t}\n\n\t&[disabled] {\n\t\tpointer-events: none;\n\t\topacity: 0.5;\n\t}\n\n\t", "\n\n\t&:focus {\n\t\toutline: none;\n\t\t", "\n\t}\n\n\t@media ", " {\n\t\t", "\n\t}\n"])), function (props) { + return props.banner ? 'overflow: hidden;' : ''; +}, function (props) { + return props.banner ? 'display: flex;' : ''; +}, function (props) { + return props.banner ? 'flex-flow: column nowrap;' : ''; +}, function (props) { + return props.banner ? '20px 20px 30px' : '10px'; +}, function (props) { + return props.banner ? 'box-shadow: 0 0 0 1px #E6E6E6;' : ''; +}, function (props) { + return props.banner ? 'transform: scale(1.02);' : 'background-color: #FAFAFA;'; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t\ttransform: scale(1.05);\n\t\t\t}") : ''; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\tbox-shadow: 0 2px 7px 0 rgba(0,0,0,0.05);\n\t\t}") : ''; +}, function (props) { + return props.banner ? 'box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;' : ''; +}, device$1.tablet, function (props) { + return props.banner ? 'min-height: 100%;' : 'padding: 15px;'; +}); +var PostHeader = styled__default["default"].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral$2(["\n\tdisplay: flex;\n\tflex-flow: row wrap;\n\n\t+ div {\n\t\tmargin-top: 20px;\n\t}\n"]))); +var PostFooter = styled__default["default"].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral$2(["\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-flow: row wrap;\n\talign-items: center;\n\tmargin-top: 15px;\n"]))); +var FeaturedImage = styled__default["default"].div.attrs(function () { + return { + tabIndex: '-1', + 'aria-hidden': true + }; +})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral$2(["\n\t", "\n\theight: ", ";\n\tmargin: ", ";\n\t", "\n\tdisplay: block;\n\t", "\n\tbackground-color: #FFF;\n\tbackground-image: ", ";\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n"])), function (props) { + return props.banner ? '' : 'width: 66px;'; +}, function (props) { + return props.banner ? '140px' : '54px'; +}, function (props) { + return props.banner ? '-20px -20px 20px' : '0 10px 0 0'; +}, function (props) { + return props.banner ? '' : 'border-radius: 4px;'; +}, function (props) { + return props.banner ? 'flex: 0 0 auto;' : ''; +}, function (props) { + return props.src ? "url(".concat(props.src, ")") : 'none'; +}); +var PostTitle = styled__default["default"].h3(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral$2(["\n\toverflow: hidden;\n\tdisplay: -webkit-box !important;\n\t-webkit-box-orient: vertical;\n\t", "\n\tmargin: ", " !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px;\n\t", "\n\n\t", "\n"])), function (props) { + return props.banner ? 'flex: 1 1 auto;' : ''; +}, function (props) { + return props.banner ? '0 0 10px' : '0'; +}, function (props) { + return props.banner ? '' : '-webkit-line-clamp: 2;'; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t-webkit-line-clamp: 2;\n\t\t}") : ''; +}); +var PostTime = styled__default["default"].p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral$2(["\n\t", "\n\tmargin: 0 !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tcolor: #888 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tletter-spacing: -0.2px;\n\n\t", "\n"])), function (props) { + return props.banner ? 'flex: 0 0 auto;' : ''; +}, function (props) { + return props.banner ? "* + & {\n\t\t\tmargin-left: 5px !important;\n\t\t}" : ''; +}); +var Excerpt = styled__default["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral$2(["\n\tdisplay: block;\n\t", "\n\n\tp {\n\t\toverflow: hidden;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\tborder: 0;\n\t\tcolor: #888 !important;\n\t\tfont-size: 13px !important;\n\t\tline-height: 22px !important;\n\t\tletter-spacing: -0.2px;\n\t\t-webkit-line-clamp: ", ";\n\t}\n"])), function (props) { + return props.banner ? 'flex: 1 1 auto;' : ''; +}, function (props) { + return props.banner ? '3' : '2'; +}); +var ReadMore = styled__default["default"].p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$2(["\n\tmin-width: 1px;\n\tflex: 1;\n\t", "\n\tcolor: #17A8E3 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px !important;\n"])), function (props) { + return props.banner ? 'margin-bottom: 0 !important;' : 'margin: 4px 0 0;'; +}); + +var Post = /*#__PURE__*/function (_Component) { + _inherits$1(Post, _Component); + + var _super = _createSuper$1(Post); + + function Post(props) { + var _this; + + _classCallCheck$1(this, Post); + + _this = _super.call(this, props); + + _defineProperty$3(_assertThisInitialized$1(_this), "openLink", function (e) { + var ref = e.target !== null ? e.target : e.srcElement; + + if (ref) { + window.open(ref.getAttribute('data-href'), '_blank'); + } }); - } else { - obj[key] = value; - } - return obj; -} + _defineProperty$3(_assertThisInitialized$1(_this), "handleKeydown", function (e) { + var key = e.which || e.keyCode; -function ownKeys$3(object, enumerableOnly) { - var keys = Object.keys(object); + switch (key) { + case aria.KeyCode.RETURN: + _this.openLink(e); - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; + break; + } }); - keys.push.apply(keys, symbols); + + _this.state = { + media: [], + error: null, + isLoaded: false + }; + _this.openLink = _this.openLink.bind(_assertThisInitialized$1(_this)); + _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized$1(_this)); + return _this; } - return keys; -} + _createClass$1(Post, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; -function _objectSpread2$3(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; + var API_URL = 'https://wpmudev.com/blog/wp-json/wp/v2/media/'; + var QUERY_ID = this.props.media; // GET media using fetch. - if (i % 2) { - ownKeys$3(Object(source), true).forEach(function (key) { - _defineProperty$4(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$3(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + if (QUERY_ID) { + fetch(API_URL + QUERY_ID).then(function (response) { + return response.json(); + }).then(function (data) { + var _data$data; + + if (((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.status) === 404) { + _this2.setState({ + isLoaded: true, + error: data.data.message + }); + } else { + _this2.setState({ + isLoaded: true, + media: data.guid.rendered + }); + } + }, function (error) { + _this2.setState({ + isLoaded: true, + error: error + }); + }); + } + } + }, { + key: "render", + value: function render() { + var _this$state = this.state, + media = _this$state.media, + error = _this$state.error, + isLoaded = _this$state.isLoaded; + var translate = this.props.translate; + var read_article = translate && translate[0].read_article ? translate[0].read_article : 'Read article'; + var min_read = translate && translate[0].min_read ? translate[0].min_read : 'min read'; // replace html entities from the title with character. + + var postTitle = this.props.title.replace(/&#(\d+);/g, function (match, dec) { + return String.fromCharCode(dec); }); + var PostImage = ''; // Empty. + + var image = this.props.image; + + if (image) { + PostImage = /*#__PURE__*/React__default["default"].createElement(FeaturedImage, _extends$7({ + src: image, + alt: "" + }, this.props, { + title: postTitle + })); + } else { + if (error) { + PostImage = error.message; + } else if ((typeof image === 'undefined' || image === null || image === '') && !this.props.media || error) { + PostImage = /*#__PURE__*/React__default["default"].createElement("span", { + style: { + marginTop: '10px' + } + }); + } else if (!isLoaded) { + PostImage = /*#__PURE__*/React__default["default"].createElement("p", { + style: { + textAlign: 'center' + } + }, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + "aria-hidden": "true" + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, "Image is loading")); + } else { + PostImage = /*#__PURE__*/React__default["default"].createElement(FeaturedImage, _extends$7({ + src: media + }, this.props, { + title: postTitle + })); + } + } + + if (this.props.banner) { + return /*#__PURE__*/React__default["default"].createElement(PostWrapper, _extends$7({}, this.props, { + title: postTitle + }), PostImage, this.props.title && '' !== this.props.title && /*#__PURE__*/React__default["default"].createElement(PostTitle, { + banner: true, + dangerouslySetInnerHTML: { + __html: this.props.title + } + }), this.props.excerpt && '' !== this.props.excerpt && /*#__PURE__*/React__default["default"].createElement(Excerpt, { + banner: true, + dangerouslySetInnerHTML: { + __html: this.props.excerpt + } + }), /*#__PURE__*/React__default["default"].createElement(PostFooter, { + banner: true + }, /*#__PURE__*/React__default["default"].createElement(ReadMore, { + banner: true + }, read_article), this.props.time && '' !== this.props.time && /*#__PURE__*/React__default["default"].createElement(PostTime, { + banner: true + }, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-clock sui-sm", + style: { + verticalAlign: 'middle', + marginRight: 5 + }, + "aria-hidden": "true" + }), this.props.time, " ", min_read))); + } + + return /*#__PURE__*/React__default["default"].createElement(PostWrapper, _extends$7({}, this.props, { + title: postTitle + }), /*#__PURE__*/React__default["default"].createElement(PostHeader, null, PostImage, /*#__PURE__*/React__default["default"].createElement("div", { + style: { + minWidth: '1px', + flex: 1 + } + }, this.props.title && '' !== this.props.title && /*#__PURE__*/React__default["default"].createElement(PostTitle, { + dangerouslySetInnerHTML: { + __html: this.props.title + } + }), this.props.time && '' !== this.props.time && /*#__PURE__*/React__default["default"].createElement(PostTime, null, "*", this.props.time, " ", min_read))), this.props.excerpt && '' !== this.props.excerpt && /*#__PURE__*/React__default["default"].createElement(Excerpt, { + dangerouslySetInnerHTML: { + __html: this.props.excerpt + } + }), /*#__PURE__*/React__default["default"].createElement(ReadMore, null, read_article)); } - } + }]); - return target; + return Post; +}(React.Component); + +function _extends$6() { + _extends$6 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$6.apply(this, arguments); } -function _objectWithoutPropertiesLoose$6(source, excluded) { +function _objectWithoutPropertiesLoose$1$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -1986,10 +2421,10 @@ function _objectWithoutPropertiesLoose$6(source, excluded) { return target; } -function _objectWithoutProperties$6(source, excluded) { +function _objectWithoutProperties$1$1(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$6(source, excluded); + var target = _objectWithoutPropertiesLoose$1$1(source, excluded); var key, i; @@ -2007,261 +2442,211 @@ function _objectWithoutProperties$6(source, excluded) { return target; } -var ButtonIcon$2 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$6(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); +function ownKeys$2(object, enumerableOnly) { + var keys = Object.keys(object); - var loader = /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, - "aria-hidden": "true" - }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), - "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-screen-reader-text" - }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; + return keys; +} - case "gray": - default: - className += ""; - break; - } // Set button style. +function _objectSpread2$2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { + _defineProperty$2(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + return target; +} - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; - - case "solid": - default: - className += ""; - break; - } // Set loading class. - - - if (loading) { - className += " sui-button-onload"; +function _defineProperty$2(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; } - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2$3({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; + return obj; +} -function _templateObject2$2() { - var data = _taggedTemplateLiteral$2(["\n.sui-wrap && {\n ", "\n ", "\n ", "\n ", "\n ", "\n\n [class*=\"sui-icon-\"]:before {\n color: inherit !important;\n }\n\n &:hover,\n &:focus {\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n}\n"]); +function _objectWithoutPropertiesLoose$7(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject2$2 = function _templateObject2() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -function _templateObject$2() { - var data = _taggedTemplateLiteral$2(["\n.sui-wrap && {\n ", "\n ", "\n ", "\n ", "\n ", "\n\n [class*=\"sui-icon-\"]:before {\n color: inherit !important;\n }\n\n &:hover,\n &:focus {\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n}\n"]); +function _objectWithoutProperties$7(source, excluded) { + if (source == null) return {}; - _templateObject$2 = function _templateObject() { - return data; - }; + var target = _objectWithoutPropertiesLoose$7(source, excluded); - return data; -} + var key, i; -var Link = styled__default['default'].a(_templateObject$2(), function (props) { - return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; -}, function (props) { - return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; -}); -var Button$1 = styled__default['default'].button(_templateObject2$2(), function (props) { - return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; -}, function (props) { - return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; -}); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); -var Dropdown = /*#__PURE__*/function (_Component) { - _inherits$2(Dropdown, _Component); + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - var _super = _createSuper$2(Dropdown); + return target; +} - function Dropdown(props) { - var _this; +var _excluded$1$1 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - _classCallCheck$2(this, Dropdown); +var ButtonIcon$1 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$7(_ref, _excluded$1$1); - _this = _super.call(this, props); - _this.state = { - open: false - }; - _this.toggle = _this.toggle.bind(_assertThisInitialized$2(_this)); - _this.wrapperRef = /*#__PURE__*/React__default['default'].createRef(); - _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized$2(_this)); - _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized$2(_this)); - return _this; - } + var loader = /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. - _createClass$2(Dropdown, [{ - key: "toggle", - value: function toggle() { - this.setState({ - open: !this.state.open - }); - } - }, { - key: "setWrapperRef", - value: function setWrapperRef(node) { - this.wrapperRef = node; - } - }, { - key: "handleClickOutside", - value: function handleClickOutside(e) { - if (this.wrapperRef && !this.wrapperRef.contains(e.target)) { - this.setState({ - open: false - }); - } - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - document.addEventListener('mousedown', this.handleClickOutside); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - document.removeEventListener('mousedown', this.handleClickOutside); - } - }, { - key: "render", - value: function render() { - var _this2 = this; + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; - var open = this.state.open; - var options = React.Children.map(this.props.children, function (option) { - var icon = option.props.icon && '' !== option.props.icon && /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(option.props.icon), - "aria-hidden": "true" - }); - var tag = option.props.tag && '' !== option.props.tag && /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-tag sui-tag-beta", - style: { - pointerEvents: 'none', - display: 'inline', - marginLeft: 5, - lineHeight: 1 - } - }, option.props.tag); - var label = /*#__PURE__*/React__default['default'].createElement(React.Fragment, null, icon, option.props.name, tag); + case 'gray': + default: + className += ''; + break; + } // Set button style. - if (option.props.href) { - return /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement(Link, _extends$4({ - href: option.props.href - }, option.props), label)); - } - return /*#__PURE__*/React__default['default'].createElement("li", null, /*#__PURE__*/React__default['default'].createElement(Button$1, option.props, label)); - }); - var clazz = !open ? 'sui-dropdown' : 'sui-dropdown open'; + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; - switch (this.props.position) { - case 'left': - clazz += ' sui-dropdown-right'; - break; + case 'solid': + default: + className += ''; + break; + } // Set loading class. - case 'center': - clazz += ' sui-dropdown-center'; - break; - case 'right': - clazz += ' sui-dropdown-left'; - break; + if (loading) { + className += ' sui-button-onload'; + } - default: - clazz += ' sui-dropdown-right'; - break; - } + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$2({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); +}; - return /*#__PURE__*/React__default['default'].createElement("div", { - className: clazz, - ref: this.setWrapperRef, - onClick: function onClick(e) { - return e.stopPropagation(); - } - }, /*#__PURE__*/React__default['default'].createElement(ButtonIcon$2, { - icon: "widget-settings-config", - label: open ? 'Open menu' : 'Close menu', - onClick: this.toggle - }), open && /*#__PURE__*/React__default['default'].createElement("ul", { - onClick: function onClick() { - return _this2.setState({ - open: false - }); - } - }, options)); +var _excluded$7 = ["classes", "now", "hasLoader", "hasLabel", "hasCancel", "hasFrame", "hasLegend", "sourceLang", "cbFunction"]; + +var ProgressBar = function ProgressBar(_ref) { + var classes = _ref.classes, + now = _ref.now, + _ref$hasLoader = _ref.hasLoader, + hasLoader = _ref$hasLoader === void 0 ? true : _ref$hasLoader, + _ref$hasLabel = _ref.hasLabel, + hasLabel = _ref$hasLabel === void 0 ? true : _ref$hasLabel, + _ref$hasCancel = _ref.hasCancel, + hasCancel = _ref$hasCancel === void 0 ? true : _ref$hasCancel, + _ref$hasFrame = _ref.hasFrame, + hasFrame = _ref$hasFrame === void 0 ? false : _ref$hasFrame, + _ref$hasLegend = _ref.hasLegend, + hasLegend = _ref$hasLegend === void 0 ? true : _ref$hasLegend, + sourceLang = _ref.sourceLang, + _ref$cbFunction = _ref.cbFunction, + cbFunction = _ref$cbFunction === void 0 ? function () {} : _ref$cbFunction, + props = _objectWithoutProperties$1$1(_ref, _excluded$7); + + var extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; + var currValue = Number(now); + var value = currValue && currValue > 0 ? currValue > 100 ? 100 : currValue : 0; + var lang = Object.assign({ + cancel: 'Cancel', + legend: 'Status...' + }, sourceLang); + var loaderMarkup = hasLoader && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-progress-icon" + }, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading" + })); + var loaderText = hasLabel && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-progress-text" + }, value, "%"); + var loaderBar = /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-progress-bar" + }, /*#__PURE__*/React__default["default"].createElement("span", { + style: { + width: "".concat(value, "%") } - }]); - - return Dropdown; -}(React.Component); + })); + var innerMarkup = /*#__PURE__*/React__default["default"].createElement("div", _extends$6({ + className: "sui-progress".concat(extraClasses) + }, props), loaderMarkup, loaderText, loaderBar, hasCancel && /*#__PURE__*/React__default["default"].createElement(ButtonIcon$1, { + icon: "close", + iconSize: "sm", + label: lang.cancel, + onClick: function onClick() { + return cbFunction(); + } + })); + return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasFrame && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-progress-block" + }, innerMarkup), hasLegend && /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-progress-state" + }, /*#__PURE__*/React__default["default"].createElement("span", null, lang.legend))), !hasFrame && innerMarkup); +}; function _extends$5() { _extends$5 = Object.assign || function (target) { @@ -2281,7 +2666,7 @@ function _extends$5() { return _extends$5.apply(this, arguments); } -function _objectWithoutPropertiesLoose$7(source, excluded) { +function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2296,10 +2681,10 @@ function _objectWithoutPropertiesLoose$7(source, excluded) { return target; } -function _objectWithoutProperties$7(source, excluded) { +function _objectWithoutProperties$6(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$7(source, excluded); + var target = _objectWithoutPropertiesLoose$6(source, excluded); var key, i; @@ -2317,35 +2702,26 @@ function _objectWithoutProperties$7(source, excluded) { return target; } -function _taggedTemplateLiteral$3(strings, raw) { - if (!raw) { - raw = strings.slice(0); - } - - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } - })); -} - -function _slicedToArray$1(arr, i) { - return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); +function _slicedToArray$2(arr, i) { + return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2(); } -function _arrayWithHoles$1(arr) { +function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArrayLimit$1(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; +function _iterableToArrayLimit$2(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -2364,16 +2740,16 @@ function _iterableToArrayLimit$1(arr, i) { return _arr; } -function _unsupportedIterableToArray$1(o, minLen) { +function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } -function _arrayLikeToArray$1(arr, len) { +function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -2383,60 +2759,124 @@ function _arrayLikeToArray$1(arr, len) { return arr2; } -function _nonIterableRest$1() { +function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _defineProperty$5(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } +var _excluded$6 = ["id", "label", "hideLabel", "description", "hideDescription", "checked", "disabled", "children", "cbFunction"]; - return obj; -} +var Toggle = function Toggle(_ref) { + var id = _ref.id, + label = _ref.label, + hideLabel = _ref.hideLabel, + description = _ref.description, + hideDescription = _ref.hideDescription, + checked = _ref.checked, + disabled = _ref.disabled, + children = _ref.children, + _ref$cbFunction = _ref.cbFunction, + cbFunction = _ref$cbFunction === void 0 ? function (e) {} : _ref$cbFunction, + args = _objectWithoutProperties$6(_ref, _excluded$6); + + var _useState = React.useState(checked), + _useState2 = _slicedToArray$2(_useState, 2), + state = _useState2[0], + setState = _useState2[1]; -function ownKeys$4(object, enumerableOnly) { - var keys = Object.keys(object); + var initialState = function initialState() { + if (!isUndefined(checked, 'boolean')) { + setState(checked); + } + }; - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } + var changeState = function changeState(e) { + setState(e.target.checked); + cbFunction(e); + }; // Set initial state. - return keys; -} -function _objectSpread2$4(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; + React.useEffect(function () { + return initialState; + }, []); + var hasLabel = !isUndefined(label) ? true : false; + var hasDescription = !isUndefined(description) ? true : false; + var hasContent = !isUndefined(children) ? true : false; + return /*#__PURE__*/React__default["default"].createElement(React.Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", { + htmlFor: id, + className: "sui-toggle" + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$5({ + type: "checkbox", + id: id + }, hasLabel && { + 'aria-labelledby': id + '--label' + }, hasDescription && { + 'aria-describedby': id + '--description' + }, hasContent && { + 'aria-controls': id + '--content' + }, true === disabled && { + disabled: true + }, { + defaultChecked: state, + onClick: function onClick(e) { + return changeState(e); + } + }, args)), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-toggle-slider", + "aria-hidden": "true" + }), hasLabel && /*#__PURE__*/React__default["default"].createElement("span", { + id: "".concat(id, "--label"), + className: "sui-toggle-label".concat(!isUndefined(hideLabel) ? ' sui-screen-reader-text' : '') + }, label), hasDescription && /*#__PURE__*/React__default["default"].createElement("span", { + id: "".concat(id, "--description"), + className: "sui-description".concat(true === hideDescription ? ' sui-screen-reader-text' : '') + }, description)), hasContent && state && /*#__PURE__*/React__default["default"].createElement("div", { + tabIndex: 0, + id: "".concat(id, "--content"), + className: "sui-toggle-content" + }, children)); +}; // Check if element is undefined. - if (i % 2) { - ownKeys$4(Object(source), true).forEach(function (key) { - _defineProperty$5(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); + +var isUndefined = function isUndefined(element, type) { + var isValid = 'undefined' !== typeof element; + var isNotEmpty = '' !== element; + + if (element && isValid && isNotEmpty) { + if (type === 'number') { + if (!Number.isNaN(element)) { + return false; + } + } else if (type === 'boolean') { + if ('boolean' === typeof element) { + return false; + } } else { - ownKeys$4(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); + return false; } } - return target; + return true; +}; + +function _extends$4() { + _extends$4 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$4.apply(this, arguments); } -function _objectWithoutPropertiesLoose$1$1(source, excluded) { +function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2451,10 +2891,10 @@ function _objectWithoutPropertiesLoose$1$1(source, excluded) { return target; } -function _objectWithoutProperties$1$1(source, excluded) { +function _objectWithoutProperties$5(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$1$1(source, excluded); + var target = _objectWithoutPropertiesLoose$5(source, excluded); var key, i; @@ -2472,246 +2912,390 @@ function _objectWithoutProperties$1$1(source, excluded) { return target; } -var ButtonIcon$3 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$1$1(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); +var _excluded$5 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"], + _excluded2$2 = ["type", "options"]; - var loader = /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, +var RadioCheckboxInput$1 = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties$5(_ref, _excluded$5); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React__default["default"].createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$4({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { "aria-hidden": "true" - }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React__default["default"].createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$4({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-screen-reader-text" + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. +}; - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var type = _ref2.type, + options = _ref2.options, + props = _objectWithoutProperties$5(_ref2, _excluded2$2); + + return /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-form-field", + role: 'radio' === type ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React__default["default"].createElement(RadioCheckboxInput$1, _extends$4({ + key: index, + type: type, + label: option.label, + labelId: option.labelId, + id: option.id, + name: option.name, + image: option.image, + checked: option.defaultChecked, + disabled: option.disabled + }, props)) : /*#__PURE__*/React__default["default"].createElement(RadioCheckboxInput$1, _extends$4({ + key: index, + type: type, + label: option.label, + labelId: option.labelId, + id: option.id, + name: option.name, + checked: option.defaultChecked, + disabled: option.disabled + }, props)); + })); +}; - case "gray": - default: - className += ""; - break; - } // Set button style. +function _extends$3() { + _extends$3 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; + return target; + }; - case "solid": - default: - className += ""; - break; - } // Set loading class. + return _extends$3.apply(this, arguments); +} +function _objectWithoutPropertiesLoose$4(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - if (loading) { - className += " sui-button-onload"; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; } - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2$4({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; + return target; +} + +function _objectWithoutProperties$4(source, excluded) { + if (source == null) return {}; -function _templateObject$3() { - var data = _taggedTemplateLiteral$3(["\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 10px;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n"]); + var target = _objectWithoutPropertiesLoose$4(source, excluded); - _templateObject$3 = function _templateObject() { - return data; - }; + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - return data; + return target; } -var ItemImage = styled__default['default'].span(_templateObject$3()); +function _taggedTemplateLiteral$1(strings, raw) { + if (!raw) { + raw = strings.slice(0); + } -var useToggle = function useToggle() { - var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); +} - var _useState = React.useState(initialValue), - _useState2 = _slicedToArray$1(_useState, 2), - value = _useState2[0], - setValue = _useState2[1]; +var _templateObject$1, _templateObject2, _templateObject3; - var toggle = React.useCallback(function () { - setValue(function (v) { - return !v; - }); - }, []); - return [value, toggle]; +var _excluded$4 = ["children", "className"], + _excluded2$1 = ["icon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"], + _excluded3$1 = ["title", "titleIcon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"], + _excluded4$1 = ["className", "children"], + _excluded5 = ["className", "children"]; +var utils = { + gutter: 30, + gutter_md: 20 +}; +var screen = { + mobile: 480, + tablet: 783, + laptop: 1200, + desktop: 1500 +}; +var device = { + mobile: "(min-width: ".concat(screen.mobile, "px)"), + tablet: "(min-width: ".concat(screen.tablet, "px)"), + laptop: "(min-width: ".concat(screen.laptop, "px)"), + desktop: "(min-width: ".concat(screen.desktop, "px)") }; -var Accordion = function Accordion(_ref) { +var Box = function Box(_ref) { var children = _ref.children, - props = _objectWithoutProperties$7(_ref, ["children"]); + className = _ref.className, + props = _objectWithoutProperties$4(_ref, _excluded$4); - return /*#__PURE__*/React__default['default'].createElement("div", _extends$5({ - className: "sui-accordion" + return /*#__PURE__*/React__default["default"].createElement("div", _extends$3({ + className: 'undefined' !== typeof className && '' !== className ? "sui-box ".concat(className) : 'sui-box' }, props), children); }; -var AccordionItem = function AccordionItem(_ref2) { - var title = _ref2.title, - titleSize = _ref2.titleSize, - icon = _ref2.icon, - image = _ref2.image, +var BoxTitle = function BoxTitle(_ref2) { + var icon = _ref2.icon, + tagLabel = _ref2.tagLabel, + tagColor = _ref2.tagColor, + tagSize = _ref2.tagSize, + tagDesign = _ref2.tagDesign, + className = _ref2.className, children = _ref2.children, - props = _objectWithoutProperties$7(_ref2, ["title", "titleSize", "icon", "image", "children"]); - - var _useToggle = useToggle(), - _useToggle2 = _slicedToArray$1(_useToggle, 2), - isOpen = _useToggle2[0], - setIsOpen = _useToggle2[1]; + props = _objectWithoutProperties$4(_ref2, _excluded2$1); - return /*#__PURE__*/React__default['default'].createElement("div", _extends$5({ - className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') - }, props), /*#__PURE__*/React__default['default'].createElement(AccordionItemHeader, { - state: isOpen ? 'true' : 'false', - title: title, - titleSize: titleSize, - icon: icon, - image: image, - onClick: setIsOpen - }), /*#__PURE__*/React__default['default'].createElement(AccordionItemBody, null, children)); -}; + var tagClass = 'sui-tag'; -var AccordionItemHeader = function AccordionItemHeader(_ref3) { - var title = _ref3.title, - titleSize = _ref3.titleSize, - icon = _ref3.icon, - image = _ref3.image, - children = _ref3.children, - props = _objectWithoutProperties$7(_ref3, ["title", "titleSize", "icon", "image", "children"]); + switch (tagColor) { + case 'red': + case 'yellow': + case 'green': + case 'blue': + case 'purple': + tagClass += ' sui-tag-' + tagColor; + break; + } - var _useState3 = React.useState(false), - _useState4 = _slicedToArray$1(_useState3, 1), - isOpen = _useState4[0]; + switch (tagSize) { + case 'sm': + case 'small': + tagClass += ' sui-tag-sm'; + break; + } - var countChildren = React__default['default'].Children.toArray(children).length; - var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-icon-".concat(icon), + switch (tagDesign) { + case 'outlined': + tagClass += ' sui-tag-ghost'; + break; + } + + return /*#__PURE__*/React__default["default"].createElement("h3", _extends$3({ + className: 'undefined' !== typeof className && '' !== className ? "sui-box-title ".concat(className) : 'sui-box-title' + }, props), icon && '' !== icon && /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon, " sui-md"), "aria-hidden": "true" - }) : ''; - var titleColumnImage = 'undefined' !== typeof image && '' !== icon ? /*#__PURE__*/React__default['default'].createElement(ItemImage, { + }), children, tagLabel && '' !== tagLabel && /*#__PURE__*/React__default["default"].createElement("span", { + className: tagClass, style: { - backgroundImage: "url(".concat(image, ")") + marginLeft: 10 } - }) : ''; - var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; - var titleColumn = /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-accordion-item-title".concat(titleColumnSize) - }, titleColumnIcon, titleColumnImage, title); - var indicator = /*#__PURE__*/React__default['default'].createElement(ButtonIcon$3, { - icon: "chevron-down", - label: isOpen ? 'Close section' : 'Open section', - className: "sui-button-icon sui-accordion-open-indicator" - }); - var columns = React__default['default'].Children.map(children, function (column, index) { - index++; - var columnSize = column.props.size; - var columnClass = 'undefined' !== typeof columnSize && '' !== columnSize ? 'sui-accordion-col-' + columnSize : 'sui-accordion-col-auto'; - var columnContent = column.props.children; - return /*#__PURE__*/React__default['default'].createElement("div", { - className: columnClass - }, columnContent, countChildren === index && indicator); - }); - var actions = /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-accordion-col-auto" - }, indicator); - return /*#__PURE__*/React__default['default'].createElement("div", _extends$5({ - className: "sui-accordion-item-header" - }, props), titleColumn, countChildren > 0 ? columns : actions); + }, tagLabel)); }; -var AccordionItemBody = function AccordionItemBody(_ref4) { - var children = _ref4.children, - props = _objectWithoutProperties$7(_ref4, ["children"]); +var Header = styled__default["default"].div.attrs(function (props) { + return { + props: props + }; +})(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tdisplay: ", ";\n\t\t", "\n\t\t", "\n\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-bottom-width: ", "px;\n\t\t", "\n\n\t\t", "\n\t", "\n\n\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return 'block' !== props.display ? 'flex' : 'block'; +}, function (props) { + return 'block' !== props.display && 'flex-flow: row wrap;'; +}, function (props) { + return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; +}, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md / 2; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md / 2; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.border || 0 === props.border ? props.border : 1; +}, function (props) { + return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; +}, function (props) { + return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; +}, function (props) { + return 'block' !== props.display && '> * + * { margin-left: 10px; }'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter / 2; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter / 2; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); - return /*#__PURE__*/React__default['default'].createElement("div", _extends$5({ - className: "sui-accordion-item-body" - }, props), children); -}; +var BoxHeader = function BoxHeader(_ref3) { + var title = _ref3.title, + titleIcon = _ref3.titleIcon, + tagLabel = _ref3.tagLabel, + tagColor = _ref3.tagColor, + tagSize = _ref3.tagSize, + tagDesign = _ref3.tagDesign; + _ref3.className; -function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } + var children = _ref3.children, + props = _objectWithoutProperties$4(_ref3, _excluded3$1); - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } -} + return /*#__PURE__*/React__default["default"].createElement(Header, props, title && '' !== title && /*#__PURE__*/React__default["default"].createElement(BoxTitle, { + icon: titleIcon, + tagLabel: tagLabel, + tagColor: tagColor, + tagSize: tagSize, + tagDesign: tagDesign + }, title), children); +}; -function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); +var Body = styled__default["default"].div.attrs(function (props) { + return { + props: props + }; +})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-top-width: ", "px;\n\t\tborder-bottom-width: ", "px;\n\t\ttext-align: ", ";\n\n\t\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.borderTop || 0 === props.borderTop ? props.borderTop : 0; +}, function (props) { + return props.borderBottom || 0 === props.borderBottom ? props.borderBottom : 0; +}, function (props) { + return props.alignment || 'left'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } +var BoxBody = function BoxBody(_ref4) { + var className = _ref4.className, + children = _ref4.children, + props = _objectWithoutProperties$4(_ref4, _excluded4$1); - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } + return /*#__PURE__*/React__default["default"].createElement(Body, _extends$3({ + className: className + }, props), children); +}; - _next(undefined); - }); +var Footer = styled__default["default"].div.attrs(function (props) { + return { + props: props }; -} +})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tdisplay: ", ";\n\t\t", "\n\t\t", "\n\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-top-width: ", "px;\n\t\t", "\n\n\t\t", "\n\t", "\n\n\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return 'block' !== props.display ? 'flex' : 'block'; +}, function (props) { + return 'block' !== props.display && 'flex-flow: row wrap;'; +}, function (props) { + return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; +}, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.border || 0 === props.border || '' === props.border ? props.border : 1; +}, function (props) { + return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; +}, function (props) { + return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; +}, function (props) { + return 'block' !== props.display && '> * + * { margin-left: 10px; }'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); -function _defineProperty$6(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } +var BoxFooter = function BoxFooter(_ref5) { + var className = _ref5.className, + children = _ref5.children, + props = _objectWithoutProperties$4(_ref5, _excluded5); - return obj; -} + return /*#__PURE__*/React__default["default"].createElement(Footer, _extends$3({ + className: className + }, props), children); +}; -function _extends$6() { - _extends$6 = Object.assign || function (target) { +function _extends$1() { + _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -2725,44 +3309,10 @@ function _extends$6() { return target; }; - return _extends$6.apply(this, arguments); -} - -function ownKeys$5(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$5(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys$5(Object(source), true).forEach(function (key) { - _defineProperty$6(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$5(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } - } - - return target; + return _extends$1.apply(this, arguments); } -function _objectWithoutPropertiesLoose$8(source, excluded) { +function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2777,10 +3327,10 @@ function _objectWithoutPropertiesLoose$8(source, excluded) { return target; } -function _objectWithoutProperties$8(source, excluded) { +function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$8(source, excluded); + var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; @@ -2798,35 +3348,38 @@ function _objectWithoutProperties$8(source, excluded) { return target; } -function _slicedToArray$2(arr, i) { - return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2(); -} +function _taggedTemplateLiteral(strings, raw) { + if (!raw) { + raw = strings.slice(0); + } -function _toConsumableArray(arr) { - return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableSpread(); + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); } -function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return _arrayLikeToArray$2(arr); +function _slicedToArray$1(arr, i) { + return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); } -function _arrayWithHoles$2(arr) { +function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); -} +function _iterableToArrayLimit$1(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; -function _iterableToArrayLimit$2(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -2845,16 +3398,16 @@ function _iterableToArrayLimit$2(arr, i) { return _arr; } -function _unsupportedIterableToArray$2(o, minLen) { +function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } -function _arrayLikeToArray$2(arr, len) { +function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -2864,256 +3417,1909 @@ function _arrayLikeToArray$2(arr, len) { return arr2; } -function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +function _nonIterableRest$1() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _nonIterableRest$2() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +function ownKeys$1(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + + return keys; } -var Pagination = function Pagination(_ref) { - var _args$children, _properties; +function _objectSpread2$1(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { + _defineProperty$1(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } - var limit = _ref.limit, - skip = _ref.skip, - results = _ref.results, - skipToFirstLabel = _ref.skipToFirstLabel, - previousLabel = _ref.previousLabel, - nextLabel = _ref.nextLabel, - skipToLastLabel = _ref.skipToLastLabel, - pagesToBottom = _ref.pagesToBottom, - args = _objectWithoutProperties$8(_ref, ["limit", "skip", "results", "skipToFirstLabel", "previousLabel", "nextLabel", "skipToLastLabel", "pagesToBottom"]); + return target; +} - var componentChildren = args.children ? ((_args$children = args.children) === null || _args$children === void 0 ? void 0 : _args$children.length) > 1 ? _toConsumableArray(args.children) : [args.children] : [], - childElements = [].concat(componentChildren, _toConsumableArray(args.child)), - elements = childElements.length, - pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit, - _useState = React.useState([]), - _useState2 = _slicedToArray$2(_useState, 2), - pagesArray = _useState2[0], - setPagesArray = _useState2[1], - _useState3 = React.useState("1"), - _useState4 = _slicedToArray$2(_useState3, 2), - selectedPage = _useState4[0], - setSelectedPage = _useState4[1], - _useState5 = React.useState(0), - _useState6 = _slicedToArray$2(_useState5, 2), - startIndex = _useState6[0], - setStartIndex = _useState6[1], - _useState7 = React.useState(pages >= 5 ? 5 : pages), - _useState8 = _slicedToArray$2(_useState7, 2), - endIndex = _useState8[0], - setEndIndex = _useState8[1], - _useState9 = React.useState(0), - _useState10 = _slicedToArray$2(_useState9, 2), - pageClickCounter = _useState10[0], - setPageClickCounter = _useState10[1], - _useState11 = React.useState(0), - _useState12 = _slicedToArray$2(_useState11, 2), - elementsStartIndex = _useState12[0], - setElementsStartIndex = _useState12[1], - _useState13 = React.useState(limit), - _useState14 = _slicedToArray$2(_useState13, 2), - elementsEndIndex = _useState14[0], - setElementsEndIndex = _useState14[1]; +function _defineProperty$1(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - React.useEffect(function () { - var pagesArray = []; + return obj; +} - for (var i = 1; i <= pages; ++i) { - pagesArray.push(i); - } +function _objectWithoutPropertiesLoose$1(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - setPagesArray(pagesArray); - }, []); - React.useEffect(function () { - selectedPage >= endIndex && incrementIndexes(); - selectedPage <= startIndex + 1 && decrementIndexes(); - }, [pageClickCounter]); - React.useEffect(function () { - if (selectedPage !== "1") { - setElementsStartIndex(selectedPage * limit - limit); - setElementsEndIndex(selectedPage * limit); - } - }, [selectedPage]); + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - var handleSkipToFirstPage = function handleSkipToFirstPage() { - setSelectedPage(1); - setStartIndex(0); - setEndIndex(pages >= 5 ? 5 : pages); - }; + return target; +} - var handleSkipToLastPage = function handleSkipToLastPage() { - setSelectedPage(pages); - setStartIndex(pages >= 5 ? pages - 5 : 0); - setEndIndex(pages); - }; +function _objectWithoutProperties$1(source, excluded) { + if (source == null) return {}; - var handlePreviousPage = function handlePreviousPage() { - selectedPage > 1 && setSelectedPage(selectedPage - 1); - decrementIndexes(); - }; + var target = _objectWithoutPropertiesLoose$1(source, excluded); - var handleNextPage = function handleNextPage() { - selectedPage < pages && setSelectedPage(parseInt(selectedPage) + 1); - incrementIndexes(); - }; + var key, i; - var decrementIndexes = function decrementIndexes() { - if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) { - setStartIndex(startIndex - 1); - setEndIndex(endIndex - 1); - } - }; + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - var incrementIndexes = function incrementIndexes() { - if (selectedPage + 1 >= endIndex && endIndex !== pages) { - setStartIndex(startIndex + 1); - setEndIndex(endIndex + 1); + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; } - }; + } - var handlePreviousEllipsis = function handlePreviousEllipsis() { - setSelectedPage(startIndex >= 5 ? endIndex - 6 : endIndex - startIndex - 1); - setStartIndex(startIndex >= 5 ? startIndex - 5 : 0); - setEndIndex(startIndex >= 5 ? endIndex - 5 : endIndex - startIndex); - }; + return target; +} - var handleNextEllipsis = function handleNextEllipsis() { - setSelectedPage(pages - endIndex >= 5 ? startIndex + 7 : pages - endIndex + startIndex + 2); - setStartIndex(pages - endIndex >= 5 ? startIndex + 5 : pages - endIndex + startIndex); - setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages); - }; +var _excluded$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - var handlePageClick = /*#__PURE__*/function () { - var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(page) { - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - setSelectedPage(page); - setPageClickCounter(pageClickCounter + 1); +var ButtonIcon = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$1(_ref, _excluded$2); - case 2: - case "end": - return _context.stop(); - } - } - }, _callee); - })); + var loader = /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. - return function handlePageClick(_x) { - return _ref2.apply(this, arguments); - }; - }(); + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; - var properties = (_properties = { - childElements: childElements, - elementsStartIndex: elementsStartIndex, - elementsEndIndex: elementsEndIndex, - handlePageClick: handlePageClick, - handleNextEllipsis: handleNextEllipsis, - handlePreviousEllipsis: handlePreviousEllipsis, - handleNextPage: handleNextPage, - handlePreviousPage: handlePreviousPage, - handleSkipToLastPage: handleSkipToLastPage, - handleSkipToFirstPage: handleSkipToFirstPage, - pagesArray: pagesArray, - selectedPage: selectedPage, - startIndex: startIndex, - endIndex: endIndex, - pages: pages, - results: results, - skipToFirstLabel: skipToFirstLabel, - previousLabel: previousLabel, - nextLabel: nextLabel, - skipToLastLabel: skipToLastLabel, - skip: skip - }, _defineProperty$6(_properties, "results", results), _defineProperty$6(_properties, "elements", elements), _properties); - if (args === null || args === void 0 ? void 0 : args.paginationContent) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, args === null || args === void 0 ? void 0 : args.paginationContent(_objectSpread2$5({}, properties)));else return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, pagesToBottom && PaginationResults(_objectSpread2$5({}, properties)), PaginationNav(_objectSpread2$5({}, properties)), !pagesToBottom && PaginationResults(_objectSpread2$5({}, properties))); -}; + case 'gray': + default: + className += ''; + break; + } // Set button style. -var PaginationResults = function PaginationResults(_ref3) { - var _React$Children$map; - var properties = _extends$6({}, _ref3); + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; + break; + } // Set loading class. + - return (_React$Children$map = React__default['default'].Children.map(properties.childElements, function (data) { - return /*#__PURE__*/React__default['default'].cloneElement(data); - })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.slice(properties.elementsStartIndex, properties.elementsEndIndex); + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2$1({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -var PaginationNav = function PaginationNav(_ref4) { - var _properties$pagesArra, _properties$pagesArra2; +function _extends$2() { + _extends$2 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - var properties = _extends$6({}, _ref4); + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } - return properties.pagesArray.length > 1 && /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-pagination-wrap" - }, properties.results && /*#__PURE__*/React__default['default'].createElement("span", { - className: "sui-pagination-results" - }, properties.elements, " results"), /*#__PURE__*/React__default['default'].createElement("ul", { - className: "sui-pagination" - }, properties.skip && /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handleSkipToFirstPage - }, /*#__PURE__*/React__default['default'].createElement("a", { - disabled: properties.selectedPage <= 1 - }, /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.skipToFirstLabel || "Go to first page"), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true", - title: properties.skipToFirstLabel || "Go to first page", - className: "sui-icon-arrow-skip-back" - }))), /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handlePreviousPage - }, /*#__PURE__*/React__default['default'].createElement("a", { - disabled: properties.selectedPage <= 1 - }, /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.previousLabel || "Go to previous page"), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true", - title: properties.previousLabel || "Go to previous page", - className: "sui-icon-chevron-left" - }))), properties.startIndex > 0 && /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handlePreviousEllipsis - }, /*#__PURE__*/React__default['default'].createElement("a", null, "\u2026")), (_properties$pagesArra = properties.pagesArray) === null || _properties$pagesArra === void 0 ? void 0 : (_properties$pagesArra2 = _properties$pagesArra.slice(properties.startIndex, properties.endIndex)) === null || _properties$pagesArra2 === void 0 ? void 0 : _properties$pagesArra2.map(function (data, index) { - return /*#__PURE__*/React__default['default'].createElement("li", { - onClick: function onClick() { - return properties.handlePageClick(parseInt(data)); - }, - key: index - }, /*#__PURE__*/React__default['default'].createElement("a", { - "aria-selected": properties.selectedPage === data, - className: properties.selectedPage == data ? "sui-active" : "" - }, data)); - }), properties.endIndex < properties.pages && /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handleNextEllipsis - }, /*#__PURE__*/React__default['default'].createElement("a", null, "\u2026")), /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handleNextPage - }, /*#__PURE__*/React__default['default'].createElement("a", { - disabled: properties.selectedPage >= properties.pages - }, /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.nextLabel || "Go to next page."), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true", - title: properties.nextLabel || "Go to next page.", - className: "sui-icon-chevron-right" - }))), properties.skip && /*#__PURE__*/React__default['default'].createElement("li", { - onClick: properties.handleSkipToLastPage - }, /*#__PURE__*/React__default['default'].createElement("a", { - disabled: properties.selectedPage >= properties.pages - }, /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.skipToLastLabel || "Go to last page."), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true", - title: properties.skipToLastLabel || "Go to last page", - className: "sui-icon-arrow-skip-forward" - }))))); + return target; + }; + + return _extends$2.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose$3(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties$3(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose$3(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var _excluded$1 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"]; + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties$3(_ref, _excluded$1); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React__default["default"].createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$2({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React__default["default"].createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("input", _extends$2({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId + }, label)); +}; + +var _excluded$3 = ["children"], + _excluded2 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded3 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded4 = ["children"]; + +var _templateObject; + +var ItemImage = styled__default["default"].span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: 30px;\n\theight: 30px;\n\tmargin-right: 10px;\n\tborder-radius: 10px;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n\tbackground-position: center;\n"]))); + +var useToggle = function useToggle() { + var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + var _useState = React.useState(initialValue), + _useState2 = _slicedToArray$1(_useState, 2), + value = _useState2[0], + setValue = _useState2[1]; + + var toggle = React.useCallback(function () { + setValue(function (v) { + return !v; + }); + }, []); + return [value, toggle]; +}; + +var Accordion = function Accordion(_ref) { + var children = _ref.children, + props = _objectWithoutProperties$2(_ref, _excluded$3); + + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ + className: "sui-accordion" + }, props), children); +}; + +var AccordionItem = function AccordionItem(_ref2) { + var title = _ref2.title, + titleSize = _ref2.titleSize, + icon = _ref2.icon, + image = _ref2.image, + children = _ref2.children, + checkboxInput = _ref2.checkboxInput, + checkboxId = _ref2.checkboxId, + checkboxName = _ref2.checkboxName, + checkboxLabel = _ref2.checkboxLabel, + checkboxSelected = _ref2.checkboxSelected, + checkboxClickHandler = _ref2.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref2, _excluded2); + + var _useToggle = useToggle(), + _useToggle2 = _slicedToArray$1(_useToggle, 2), + isOpen = _useToggle2[0], + setIsOpen = _useToggle2[1]; + + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ + className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') + }, props), /*#__PURE__*/React__default["default"].createElement(AccordionItemHeader, { + state: isOpen ? 'true' : 'false', + title: title, + titleSize: titleSize, + icon: icon, + image: image, + onClick: setIsOpen, + checkboxInput: checkboxInput, + checkboxId: checkboxId, + checkboxSelected: checkboxSelected, + checkboxClickHandler: checkboxClickHandler, + checkboxName: checkboxName, + checkboxLabel: checkboxLabel + }), /*#__PURE__*/React__default["default"].createElement(AccordionItemBody, null, children)); +}; + +var AccordionItemHeader = function AccordionItemHeader(_ref3) { + var title = _ref3.title, + titleSize = _ref3.titleSize, + icon = _ref3.icon, + image = _ref3.image, + children = _ref3.children, + checkboxInput = _ref3.checkboxInput, + checkboxId = _ref3.checkboxId, + checkboxName = _ref3.checkboxName, + checkboxLabel = _ref3.checkboxLabel, + checkboxSelected = _ref3.checkboxSelected, + checkboxClickHandler = _ref3.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref3, _excluded3); + + var _useState3 = React.useState(false), + _useState4 = _slicedToArray$1(_useState3, 1), + isOpen = _useState4[0]; + + var countChildren = React__default["default"].Children.toArray(children).length; + var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React__default["default"].createElement("span", { + className: "sui-icon-".concat(icon), + "aria-hidden": "true" + }) : ''; + var titleColumnImage = 'undefined' !== typeof image && '' !== image ? /*#__PURE__*/React__default["default"].createElement(ItemImage, { + style: { + backgroundImage: "url(".concat(image, ")") + } + }) : ''; + var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; + var checkboxItem = checkboxInput ? /*#__PURE__*/React__default["default"].createElement(RadioCheckboxInput, { + type: "checkbox", + id: checkboxId, + name: checkboxName, + defaultChecked: checkboxSelected, + onChange: checkboxClickHandler, + label: checkboxLabel + }) : ''; + var titleColumn = /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-accordion-item-title".concat(titleColumnSize) + }, checkboxItem, titleColumnIcon, titleColumnImage, title); + var indicator = /*#__PURE__*/React__default["default"].createElement(ButtonIcon, { + icon: "chevron-down", + label: isOpen ? 'Close section' : 'Open section', + className: "sui-button-icon sui-accordion-open-indicator" + }); + var columns = React__default["default"].Children.map(children, function (column, index) { + index++; + var columnSize = column.props.size; + var columnClass = 'undefined' !== typeof columnSize && '' !== columnSize ? 'sui-accordion-col-' + columnSize : 'sui-accordion-col-auto'; + var columnContent = column.props.children; + return /*#__PURE__*/React__default["default"].createElement("div", { + className: columnClass + }, columnContent, countChildren === index && indicator); + }); + var actions = /*#__PURE__*/React__default["default"].createElement("div", { + className: "sui-accordion-col-auto" + }, indicator); + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ + className: "sui-accordion-item-header" + }, props), titleColumn, countChildren > 0 ? columns : actions); +}; + +var AccordionItemBody = function AccordionItemBody(_ref4) { + var children = _ref4.children, + props = _objectWithoutProperties$2(_ref4, _excluded4); + + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ + className: "sui-accordion-item-body" + }, props), children); +}; + +function ownKeys(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + + return keys; +} + +function _objectSpread2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; +} + +function _typeof(obj) { + "@babel/helpers - typeof"; + + return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, _typeof(obj); +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); + return Constructor; +} + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf(subClass, superClass); +} + +function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); +} + +function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); +} + +function _isNativeReflectConstruct() { + if (typeof Reflect === "undefined" || !Reflect.construct) return false; + if (Reflect.construct.sham) return false; + if (typeof Proxy === "function") return true; + + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); + return true; + } catch (e) { + return false; + } +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +function _possibleConstructorReturn(self, call) { + if (call && (_typeof$1(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } + + return _assertThisInitialized(self); +} + +function _createSuper(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct(); + + return function _createSuperInternal() { + var Super = _getPrototypeOf(Derived), + result; + + if (hasNativeReflectConstruct) { + var NewTarget = _getPrototypeOf(this).constructor; + + result = Reflect.construct(Super, arguments, NewTarget); + } else { + result = Super.apply(this, arguments); + } + + return _possibleConstructorReturn(this, result); + }; +} + +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArrayLimit(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; + var _arr = []; + var _n = true; + var _d = false; + + var _s, _e; + + try { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + + return arr2; +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _createForOfIteratorHelper(o, allowArrayLike) { + var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; + + if (!it) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + + var F = function F() {}; + + return { + s: F, + n: function n() { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function e(_e2) { + throw _e2; + }, + f: F + }; + } + + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + var normalCompletion = true, + didErr = false, + err; + return { + s: function s() { + it = it.call(o); + }, + n: function n() { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function e(_e3) { + didErr = true; + err = _e3; + }, + f: function f() { + try { + if (!normalCompletion && it["return"] != null) it["return"](); + } finally { + if (didErr) throw err; + } + } + }; +} // https://github.com/davidtheclark/no-scroll/blob/master/index.js + + +var isOn = false; +var scrollbarSize; +var scrollTop; + +function getScrollbarSize() { + if (typeof scrollbarSize !== 'undefined') return scrollbarSize; + var doc = document.documentElement; + var dummyScroller = document.createElement('div'); + dummyScroller.setAttribute('style', 'width:99px;height:99px;' + 'position:absolute;top:-9999px;overflow:scroll;'); + doc.appendChild(dummyScroller); + scrollbarSize = dummyScroller.offsetWidth - dummyScroller.clientWidth; + doc.removeChild(dummyScroller); + return scrollbarSize; +} + +function hasScrollbar() { + return document.documentElement.scrollHeight > window.innerHeight; +} + +function on() { + if (typeof document === 'undefined' || isOn) return; + var doc = document.documentElement; + scrollTop = window.pageYOffset; + + if (hasScrollbar()) { + doc.style.width = 'calc(100% - ' + getScrollbarSize() + 'px)'; + } else { + doc.style.width = '100%'; + } + + doc.style.position = 'fixed'; + doc.style.top = -scrollTop + 'px'; + doc.style.overflow = 'hidden'; + isOn = true; +} + +function off() { + if (typeof document === 'undefined' || !isOn) return; + var doc = document.documentElement; + doc.style.width = ''; + doc.style.position = ''; + doc.style.top = ''; + doc.style.overflow = ''; + + if (typeof scrollTop === 'number') { + window.scroll(0, scrollTop); + } + + isOn = false; +} // https://github.com/davidtheclark/tabbable/blob/master/src/index.js + + +var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])']; +var candidateSelector = candidateSelectors.join(','); +var matches = typeof Element === 'undefined' ? function () { + return false; +} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; + +function getHTMLElements(root, selector) { + var result = []; + + var _iterator = _createForOfIteratorHelper(root.querySelectorAll(selector)), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var el = _step.value; + + if (el instanceof HTMLElement) { + result.push(el); + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + + return result; +} + +function tabbable(el, optionalOptions) { + var options = optionalOptions || {}; + var regularTabbables = []; + var orderedTabbables = []; + var candidates = getHTMLElements(el, candidateSelector); + + if (options.includeContainer) { + if (matches.call(el, candidateSelector)) { + candidates = Array.prototype.slice.apply(candidates); + candidates.unshift(el); + } + } + + var candidate; + var candidateTabindex; + + for (var i = 0; i < candidates.length; i++) { + candidate = candidates[i]; + + if (!isNodeMatchingSelectorTabbable(candidate)) { + continue; + } + + candidateTabindex = getTabindex(candidate); + + if (candidateTabindex === 0) { + regularTabbables.push(candidate); + } else { + orderedTabbables.push({ + documentOrder: i, + tabIndex: candidateTabindex, + node: candidate + }); + } + } + + var tabbableNodes = orderedTabbables.sort(sortOrderedTabbables).map(function (a) { + return a.node; + }).concat(regularTabbables); + return tabbableNodes; +} + +tabbable.isTabbable = isTabbable; +tabbable.isFocusable = isFocusable; + +function isNodeMatchingSelectorTabbable(node) { + if (!isNodeMatchingSelectorFocusable(node) || isNonTabbableRadio(node) || getTabindex(node) < 0) { + return false; + } + + return true; +} + +function isTabbable(node) { + if (!node) { + throw new Error('No node provided'); + } + + if (matches.call(node, candidateSelector) === false) { + return false; + } + + return isNodeMatchingSelectorTabbable(node); +} + +function isNodeMatchingSelectorFocusable(node) { + if (node.disabled || isHiddenInput(node) || isHidden(node)) { + return false; + } + + return true; +} + +var focusableCandidateSelector = candidateSelectors.concat('iframe').join(','); + +function isFocusable(node) { + if (!node) { + throw new Error('No node provided'); + } // Added this to make TypeScript work. + + + if (!(node instanceof HTMLElement)) return false; + + if (matches.call(node, focusableCandidateSelector) === false) { + return false; + } + + return isNodeMatchingSelectorFocusable(node); +} + +function getTabindex(node) { + var tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10); + + if (!isNaN(tabindexAttr)) { + return tabindexAttr; + } // Browsers do not return `tabIndex` correctly for contentEditable nodes; + // so if they don't have a tabindex attribute specifically set, assume it's 0. + + + if (isContentEditable(node)) { + return 0; + } + + return node.tabIndex; +} + +function sortOrderedTabbables(a, b) { + return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex; +} + +function isContentEditable(node) { + return node.contentEditable === 'true'; +} + +function isInput(node) { + return node.tagName === 'INPUT'; +} + +function isHiddenInput(node) { + return isInput(node) && node.type === 'hidden'; +} + +function isRadio(node) { + return isInput(node) && node.type === 'radio'; +} + +function isNonTabbableRadio(node) { + return isRadio(node) && !isTabbableRadio(node); +} + +function getCheckedRadio(nodes) { + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].checked) { + return nodes[i]; + } + } + + return undefined; +} + +function isTabbableRadio(node) { + if (!node.name) { + return true; + } + + if (!node.ownerDocument) { + // Need this for TypeScript to be OK with the rest of this code. + // I guess we'll just assume that anything without an owner + // document isn't tabbable... + return false; + } // This won't account for the edge case where you have radio groups with the same + // in separate forms on the same page. + + + var radioSet = Array.from(node.ownerDocument.querySelectorAll('input[type="radio"][name="' + node.name + '"]')); + var checked = getCheckedRadio(radioSet); + return !checked || checked === node; +} + +function isHidden(node) { + // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element, + // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well. + return node.offsetParent === null || getComputedStyle(node).visibility === 'hidden'; +} + +var activeFocusDelay; + +var activeFocusTraps = function () { + var trapQueue = []; + return { + activateTrap: function activateTrap(trap) { + if (trapQueue.length > 0) { + var activeTrap = trapQueue[trapQueue.length - 1]; + + if (activeTrap !== trap) { + activeTrap.pause(); + } + } + + var trapIndex = trapQueue.indexOf(trap); + + if (trapIndex === -1) { + trapQueue.push(trap); + } else { + // move this existing trap to the front of the queue + trapQueue.splice(trapIndex, 1); + trapQueue.push(trap); + } + }, + deactivateTrap: function deactivateTrap(trap) { + var trapIndex = trapQueue.indexOf(trap); + + if (trapIndex !== -1) { + trapQueue.splice(trapIndex, 1); + } + + if (trapQueue.length > 0) { + trapQueue[trapQueue.length - 1].unpause(); + } + } + }; +}(); + +function getHTMLElement(doc, selector) { + var el = doc.querySelector(selector); + + if (!(el && el instanceof HTMLElement)) { + throw new Error("No HTML element matches \"".concat(selector, "\"!")); + } + + return el; +} + +function createFocusTrap(element, userOptions) { + var doc = document; + var container = typeof element === 'string' ? getHTMLElement(doc, element) : element; + + var config = _objectSpread2({ + returnFocusOnDeactivate: true, + escapeDeactivates: true + }, userOptions); + + var state = { + firstTabbableNode: null, + lastTabbableNode: null, + nodeFocusedBeforeActivation: null, + mostRecentlyFocusedNode: null, + active: false, + paused: false + }; + var trap = { + activate: activate, + deactivate: deactivate, + pause: pause, + unpause: unpause + }; + return trap; + + function activate(activateOptions) { + if (state.active) return; + updateTabbableNodes(); + state.active = true; + state.paused = false; + state.nodeFocusedBeforeActivation = doc.activeElement; + var onActivate = activateOptions && activateOptions.onActivate ? activateOptions.onActivate : config.onActivate; + + if (onActivate) { + onActivate(); + } + + addListeners(); + return trap; + } + + function deactivate(deactivateOptions) { + if (!state.active) return; + clearTimeout(activeFocusDelay); + removeListeners(); + state.active = false; + state.paused = false; + activeFocusTraps.deactivateTrap(trap); + var onDeactivate = deactivateOptions && deactivateOptions.onDeactivate !== undefined ? deactivateOptions.onDeactivate : config.onDeactivate; + + if (onDeactivate) { + onDeactivate(); + } + + var returnFocus = deactivateOptions && deactivateOptions.returnFocus !== undefined ? deactivateOptions.returnFocus : config.returnFocusOnDeactivate; + + if (returnFocus) { + delay(function () { + tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)); + }); + } + + return trap; + } + + function containerContains(el) { + if (el && el instanceof Node) return container.contains(el); + return false; + } + + function pause() { + if (state.paused || !state.active) return; + state.paused = true; + removeListeners(); + } + + function unpause() { + if (!state.paused || !state.active) return; + state.paused = false; + updateTabbableNodes(); + addListeners(); + } + + function addListeners() { + if (!state.active) return; // There can be only one listening focus trap at a time + + activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event + // that caused the focus trap activation. + + activeFocusDelay = delay(function () { + tryFocus(getInitialFocusNode()); + }); + doc.addEventListener('focusin', checkFocusIn, true); + doc.addEventListener('mousedown', checkPointerDown, { + capture: true, + passive: false + }); + doc.addEventListener('touchstart', checkPointerDown, { + capture: true, + passive: false + }); + doc.addEventListener('click', checkClick, { + capture: true, + passive: false + }); + doc.addEventListener('keydown', checkKey, { + capture: true, + passive: false + }); + return trap; + } + + function removeListeners() { + if (!state.active) return; + doc.removeEventListener('focusin', checkFocusIn, true); + doc.removeEventListener('mousedown', checkPointerDown, true); + doc.removeEventListener('touchstart', checkPointerDown, true); + doc.removeEventListener('click', checkClick, true); + doc.removeEventListener('keydown', checkKey, true); + return trap; + } + + function getNodeForOption(optionName) { + var optionValue = config[optionName]; + var node = optionValue; + + if (!optionValue) { + return null; + } + + if (typeof optionValue === 'string') { + node = doc.querySelector(optionValue); + + if (!node) { + throw new Error('`' + optionName + '` refers to no known node'); + } + } + + if (typeof optionValue === 'function') { + node = optionValue(); + + if (!node) { + throw new Error('`' + optionName + '` did not return a node'); + } + } + + return node; + } + + function getInitialFocusNode() { + var node; + + if (getNodeForOption('initialFocus') !== null) { + node = getNodeForOption('initialFocus'); + } else if (container.contains(doc.activeElement)) { + node = doc.activeElement; + } else { + node = state.firstTabbableNode || getNodeForOption('fallbackFocus'); + } + + if (!node) { + throw new Error('Your focus-trap needs to have at least one focusable element'); + } + + return node; + } + + function getReturnFocusNode(previousActiveElement) { + var node = getNodeForOption('setReturnFocus'); + return node ? node : previousActiveElement; + } // This needs to be done on mousedown and touchstart instead of click + // so that it precedes the focus event. + + + function checkPointerDown(e) { + if (containerContains(e.target)) return; + + if (config.clickOutsideDeactivates) { + deactivate({ + returnFocus: !tabbable.isFocusable(e.target) + }); + return; + } // This is needed for mobile devices. + // (If we'll only let `click` events through, + // then on mobile they will be blocked anyways if `touchstart` is blocked.) + + + if (config.allowOutsideClick && config.allowOutsideClick(e)) { + return; + } + + e.preventDefault(); + } // In case focus escapes the trap for some strange reason, pull it back in. + + + function checkFocusIn(e) { + // In Firefox when you Tab out of an iframe the Document is briefly focused. + if (containerContains(e.target) || e.target instanceof Document) { + return; + } + + e.stopImmediatePropagation(); + tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); + } + + function checkKey(e) { + if (config.escapeDeactivates !== false && isEscapeEvent(e)) { + e.preventDefault(); + deactivate(); + return; + } + + if (isTabEvent(e)) { + checkTab(e); + return; + } + } // Hijack Tab events on the first and last focusable nodes of the trap, + // in order to prevent focus from escaping. If it escapes for even a + // moment it can end up scrolling the page and causing confusion so we + // kind of need to capture the action at the keydown phase. + + + function checkTab(e) { + updateTabbableNodes(); + + if (e.shiftKey && e.target === state.firstTabbableNode) { + e.preventDefault(); + tryFocus(state.lastTabbableNode); + return; + } + + if (!e.shiftKey && e.target === state.lastTabbableNode) { + e.preventDefault(); + tryFocus(state.firstTabbableNode); + return; + } + } + + function checkClick(e) { + if (config.clickOutsideDeactivates) return; + if (containerContains(e.target)) return; + + if (config.allowOutsideClick && config.allowOutsideClick(e)) { + return; + } + + e.preventDefault(); + e.stopImmediatePropagation(); + } + + function updateTabbableNodes() { + var tabbableNodes = tabbable(container); + state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode(); + state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode(); + } + + function tryFocus(node) { + if (node === doc.activeElement) return; + + if (!node || !node.focus) { + tryFocus(getInitialFocusNode()); + return; + } + + node.focus({ + preventScroll: userOptions.preventScroll + }); + state.mostRecentlyFocusedNode = node; + + if (isSelectableInput(node)) { + node.select(); + } + } +} + +function isSelectableInput(node) { + return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function'; +} + +function isEscapeEvent(e) { + return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; +} + +function isTabEvent(e) { + return e.key === 'Tab' || e.keyCode === 9; +} + +function delay(fn) { + return window.setTimeout(fn, 0); +} + +function isFocusableElement(el) { + // This isn't actually a great way of testing this, but we want to + // preserve the original behavior while also satisfying TypeScript. + return el.focus; +} + +var ReactFocusTrap = /*#__PURE__*/function (_React$Component) { + _inherits(ReactFocusTrap, _React$Component); + + var _super = _createSuper(ReactFocusTrap); + + function ReactFocusTrap(props) { + var _this; + + _classCallCheck(this, ReactFocusTrap); + + _this = _super.call(this, props); + + _this.setFocusTrapElement = function (element) { + _this.focusTrapElement = element; + }; + + if (typeof document !== 'undefined') { + _this.previouslyFocusedElement = document.activeElement; + } + + return _this; + } + + _createClass(ReactFocusTrap, [{ + key: "componentDidMount", + value: function componentDidMount() { + // We need to hijack the returnFocusOnDeactivate option, + // because React can move focus into the element before we arrived at + // this lifecycle hook (e.g. with autoFocus inputs). So the component + // captures the previouslyFocusedElement in componentWillMount, + // then (optionally) returns focus to it in componentWillUnmount. + var specifiedFocusTrapOptions = this.props.focusTrapOptions; + var tailoredFocusTrapOptions = { + returnFocusOnDeactivate: false + }; + + for (var optionName in specifiedFocusTrapOptions) { + if (!Object.prototype.hasOwnProperty.call(specifiedFocusTrapOptions, optionName)) continue; + if (optionName === 'returnFocusOnDeactivate') continue; + tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName]; + } // eslint-disable-next-line react/no-find-dom-node + + + var focusTrapElementDOMNode = ReactDOM__default["default"].findDOMNode(this.focusTrapElement); + + if (!(focusTrapElementDOMNode instanceof HTMLElement)) { + throw new Error('Focus trap element DOM node is not an HTML element!'); + } + + this.focusTrap = this.props._createFocusTrap(focusTrapElementDOMNode, tailoredFocusTrapOptions); + + if (this.props.active) { + this.focusTrap.activate(); + } + + if (this.props.paused) { + this.focusTrap.pause(); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (!this.focusTrap) { + throw new Error('Assertion failure!'); + } + + if (prevProps.active && !this.props.active) { + var returnFocusOnDeactivate = this.props.focusTrapOptions.returnFocusOnDeactivate; + var returnFocus = returnFocusOnDeactivate || false; + var config = { + returnFocus: returnFocus + }; + this.focusTrap.deactivate(config); + } else if (!prevProps.active && this.props.active) { + this.focusTrap.activate(); + } + + if (prevProps.paused && !this.props.paused) { + this.focusTrap.unpause(); + } else if (!prevProps.paused && this.props.paused) { + this.focusTrap.pause(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (!this.focusTrap) { + throw new Error('Assertion failure!'); + } + + this.focusTrap.deactivate(); + + if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement && isFocusableElement(this.previouslyFocusedElement)) { + this.previouslyFocusedElement.focus(); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var child = React__default["default"].Children.only(this.props.children); + + var composedRefCallback = function composedRefCallback(element) { + _this2.setFocusTrapElement(element); + + if (typeof child.ref === 'function') { + child.ref(element); + } + }; + + var childWithRef = /*#__PURE__*/React__default["default"].cloneElement(child, { + ref: composedRefCallback + }); + return childWithRef; + } + }]); + + return ReactFocusTrap; +}(React__default["default"].Component); + +ReactFocusTrap.defaultProps = { + active: true, + paused: false, + focusTrapOptions: {}, + _createFocusTrap: createFocusTrap +}; + +function displace(WrappedComponent, optionalOptions) { + var options = optionalOptions || {}; + + var Displaced = /*#__PURE__*/function (_React$Component) { + _inherits(Displaced, _React$Component); + + var _super = _createSuper(Displaced); + + function Displaced() { + _classCallCheck(this, Displaced); + + return _super.apply(this, arguments); + } + + _createClass(Displaced, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.container = function () { + var renderTo = options.renderTo; + + if (!renderTo) { + var result = document.createElement('div'); + document.body.appendChild(result); + return result; + } else if (typeof renderTo === 'string') { + var el = document.querySelector(renderTo); + + if (!el) { + throw new Error("No element matches \"".concat(renderTo, "\"!")); + } + + return el; + } else { + return renderTo; + } + }(); + + this.forceUpdate(); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (!options.renderTo && this.container && this.container.parentNode) { + this.container.parentNode.removeChild(this.container); + } + } + }, { + key: "render", + value: function render() { + if (this.props.mounted === false) return null; + + if (this.container) { + return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/React__default["default"].createElement(WrappedComponent, this.props, this.props.children), this.container); + } + + return false; + } + }]); + + return Displaced; + }(React__default["default"].Component); + + return Displaced; +} + +var Modal$1 = /*#__PURE__*/function (_React$Component) { + _inherits(Modal, _React$Component); + + var _super = _createSuper(Modal); + + function Modal(props) { + var _this; + + _classCallCheck(this, Modal); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "clearTimer", function () { + var _this$timeout; + + (_this$timeout = _this.timeout) === null || _this$timeout === void 0 ? void 0 : _this$timeout.forEach(function (timer) { + clearTimeout(timer); + }); + }); + + _this.getApplicationNode = function () { + if (_this.props.getApplicationNode) return _this.props.getApplicationNode(); + return _this.props.applicationNode; + }; + + _this.checkUnderlayClick = function (event) { + if (_this.dialogNode && event.target instanceof Node && _this.dialogNode.contains(event.target) || // If the click is on the scrollbar we don't want to close the modal. + event.target instanceof Element && event.target.ownerDocument && (event.pageX > event.target.ownerDocument.documentElement.offsetWidth || event.pageY > event.target.ownerDocument.documentElement.offsetHeight)) return; + + _this.exit(event); + }; + + _this.checkDocumentKeyDown = function (event) { + if (_this.props.escapeExits && (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27)) { + _this.exit(event); + } + }; + + _this.exit = function (event) { + if (_this.props.onExit) { + _this.props.onExit(event); + } + }; + + if (!_this.props.titleText && !_this.props.titleId) { + throw new Error('react-aria-modal instances should have a `titleText` or `titleId`'); + } + + _this.timeout = []; + return _this; + } + + _createClass(Modal, [{ + key: "componentDidMount", + value: function componentDidMount() { + if (this.props.onEnter) { + this.props.onEnter(); + } // Timeout to ensure this happens *after* focus has moved + + + var applicationNode = this.getApplicationNode(); + this.timeout.push(setTimeout(function () { + if (applicationNode && applicationNode instanceof Element) { + applicationNode.setAttribute("aria-hidden", "true"); + } + }, 0)); + + if (this.props.escapeExits) { + this.timeout.push(this.addKeyDownListener()); + } + + if (this.props.scrollDisabled) { + on(); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (prevProps.scrollDisabled && !this.props.scrollDisabled) { + off(); + } else if (!prevProps.scrollDisabled && this.props.scrollDisabled) { + on(); + } + + if (this.props.escapeExits && !prevProps.escapeExits) { + this.timeout.push(this.addKeyDownListener()); + } else if (!this.props.escapeExits && prevProps.escapeExits) { + this.timeout.push(this.removeKeyDownListener()); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (this.props.scrollDisabled) { + off(); + } + + var applicationNode = this.getApplicationNode(); + + if (applicationNode && applicationNode instanceof Element) { + applicationNode.setAttribute('aria-hidden', 'false'); + } + + this.timeout.push(this.removeKeyDownListener()); + this.clearTimer(); + } + }, { + key: "addKeyDownListener", + value: function addKeyDownListener() { + var _this2 = this; + + return setTimeout(function () { + document.addEventListener("keydown", _this2.checkDocumentKeyDown); + }); + } + }, { + key: "removeKeyDownListener", + value: function removeKeyDownListener() { + var _this3 = this; + + return setTimeout(function () { + document.removeEventListener("keydown", _this3.checkDocumentKeyDown); + }); + } + }, { + key: "render", + value: function render() { + var _this4 = this; + + var props = this.props; + var style = {}; // @edited + // if (props.includeDefaultStyles) { + // style = { + // position: "fixed", + // top: 0, + // left: 0, + // width: "100%", + // height: "100%", + // zIndex: 1050, + // overflowX: "hidden", + // overflowY: "auto", + // WebkitOverflowScrolling: "touch", + // textAlign: "center" + // }; + // if (props.underlayColor) { + // style.background = props.underlayColor; + // } + // if (props.underlayClickExits) { + // style.cursor = "pointer"; + // } + // } + + if (props.underlayStyle) { + for (var key in props.underlayStyle) { + if (!Object.prototype.hasOwnProperty.call(props.underlayStyle, key)) continue; + style[key] = props.underlayStyle[key]; + } + } + + var underlayProps = { + className: props.underlayClass, + style: style + }; + + if (props.underlayClickExits) { + underlayProps.onMouseDown = this.checkUnderlayClick; + } + + for (var prop in this.props.underlayProps) { + underlayProps[prop] = this.props.underlayProps[prop]; + } + + var verticalCenterStyle = {}; // @edited + // if (props.includeDefaultStyles) { + // verticalCenterStyle = { + // display: "inline-block", + // height: "100%", + // verticalAlign: "middle" + // }; + // } + + var dialogStyle = {}; // @edited + // if (props.includeDefaultStyles) { + // dialogStyle = { + // display: "inline-block", + // textAlign: "left", + // top: 0, + // maxWidth: "100%", + // cursor: "default", + // outline: props.focusDialog ? 0 : undefined + // }; + // if (props.verticallyCenter) { + // dialogStyle.verticalAlign = "middle"; + // dialogStyle.top = 0; + // } + // } + + if (props.dialogStyle) { + for (var _key in props.dialogStyle) { + if (!Object.prototype.hasOwnProperty.call(props.dialogStyle, _key)) continue; + dialogStyle[_key] = props.dialogStyle[_key]; + } + } + + var dialogProps = { + key: 'b', + ref: function ref(el) { + _this4.dialogNode = el; + }, + role: props.alert ? 'alertdialog' : 'dialog', + id: props.dialogId, + className: props.dialogClass, + style: dialogStyle + }; + + if (props.titleId) { + dialogProps['aria-labelledby'] = props.titleId; + } else if (props.titleText) { + dialogProps['aria-label'] = props.titleText; + } + + if (props.focusDialog) { + dialogProps.tabIndex = -1; + } // Apply data- and aria- attributes passed as props + + + for (var _key2 in props) { + if (/^(data-|aria-)/.test(_key2)) { + dialogProps[_key2] = props[_key2]; + } + } + + var childrenArray = [/*#__PURE__*/React__default["default"].createElement('div', _objectSpread2({}, dialogProps), props.children)]; + + if (props.verticallyCenter) { + childrenArray.unshift( /*#__PURE__*/React__default["default"].createElement('div', { + key: 'a', + style: verticalCenterStyle + })); + } + + var focusTrapOptions = props.focusTrapOptions || {}; + + if (props.focusDialog || props.initialFocus) { + focusTrapOptions.initialFocus = props.focusDialog ? "#".concat(this.props.dialogId) : props.initialFocus; + } + + focusTrapOptions.escapeDeactivates = props.escapeExits; + return /*#__PURE__*/React__default["default"].createElement(ReactFocusTrap, { + focusTrapOptions: focusTrapOptions, + paused: props.focusTrapPaused + }, /*#__PURE__*/React__default["default"].createElement('div', _objectSpread2({}, underlayProps), childrenArray)); + } + }]); + + return Modal; +}(React__default["default"].Component); + +Modal$1.defaultProps = { + underlayProps: {}, + dialogId: 'react-aria-modal-dialog', + // @edited + // underlayClickExits: true, + escapeExits: true, + // @edited + // underlayColor: "rgba(0,0,0,0.5)", + // includeDefaultStyles: true, + focusTrapPaused: false, + scrollDisabled: true +}; +var AriaModal = displace(Modal$1); + +AriaModal.renderTo = function (input) { + return displace(Modal$1, { + renderTo: input + }); +}; + +var _excluded = ["modalContent", "triggerContent"]; + +var Modal = function Modal(_ref) { + var modalContent = _ref.modalContent, + triggerContent = _ref.triggerContent, + props = _objectWithoutProperties(_ref, _excluded); + + var _React$useState = React__default["default"].useState(false), + _React$useState2 = _slicedToArray(_React$useState, 2), + isOpen = _React$useState2[0], + setIsOpen = _React$useState2[1]; + + var _React$useState3 = React__default["default"].useState(false), + _React$useState4 = _slicedToArray(_React$useState3, 2), + isClosing = _React$useState4[0], + setIsClosing = _React$useState4[1]; // States for sliders. + + + var _React$useState5 = React__default["default"].useState(props.firstSlide), + _React$useState6 = _slicedToArray(_React$useState5, 2), + currentSlide = _React$useState6[0], + setCurrentSlide = _React$useState6[1]; + + var _React$useState7 = React__default["default"].useState(null), + _React$useState8 = _slicedToArray(_React$useState7, 2), + slideDirection = _React$useState8[0], + setSlideDirection = _React$useState8[1]; + + React__default["default"].useEffect(function () { + if (!props.dialogId) { + throw new Error('SUI Modal instances should have a `dialogId`'); + } + }, [props.dialogId]); + var isSlider = 'object' === _typeof(modalContent) && null !== modalContent; + + var openModal = function openModal() { + return setIsOpen(true); + }; + + var closeModal = function closeModal() { + // Close the modal with the exit animation and reset the slider. + setIsClosing(true); + setTimeout(function () { + setIsOpen(false); + setIsClosing(false); + + if (isSlider) { + setSlideDirection(null); + setCurrentSlide(props.firstSlide); + } + }, 300); + }; + + var slideTo = function slideTo(slide) { + var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left'; + setCurrentSlide(slide); + setSlideDirection(direction); + }; + + var _props$getApplication = props.getApplicationNode, + getApplicationNode = _props$getApplication === void 0 ? function () { + return document.getElementsByClassName('sui-wrap')[0]; + } : _props$getApplication; + var dialogClass = "sui-modal-content sui-content-".concat(isClosing ? 'fade-out' : 'fade-in', " ").concat(props.dialogClass || ''); + var renderContent, modalSize, initialFocus; + + if (!isSlider) { + // Not a slider, we can just render the content. + renderContent = modalContent; + modalSize = props.size; + initialFocus = props.initialFocus || false; + } else { + // Render the content from the given slides. + renderContent = modalContent[currentSlide].render; + initialFocus = modalContent[currentSlide].focus || false; + modalSize = modalContent[currentSlide].size; // Add the slide direction class when provided and we're not closing the modal. + + if (slideDirection && !isClosing) { + dialogClass += "sui-modal-slide sui-active sui-fadein-".concat(slideDirection); + } + } // Use 'isOpen' as an alias of 'mounted' if not defined. + + + if ('undefined' === typeof props.mounted) { + props.mounted = isOpen; + } + + var wrapper = !props.renderToNode ? '.sui-wrap' : props.renderToNode; + var AltModal = wrapper ? AriaModal.renderTo(wrapper) : AriaModal; + return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AltModal, _extends({ + getApplicationNode: getApplicationNode, + dialogClass: dialogClass, + underlayClass: "sui-modal sui-modal-".concat(modalSize || 'md', " sui-active ").concat(props.underlayClass || ''), + includeDefaultStyle: false, + initialFocus: initialFocus + }, props), renderContent({ + closeModal: closeModal, + slideTo: slideTo + })), triggerContent && triggerContent({ + openModal: openModal + })); }; exports.Accordion = Accordion; @@ -3125,11 +5331,15 @@ exports.BoxBody = BoxBody; exports.BoxFooter = BoxFooter; exports.BoxHeader = BoxHeader; exports.BoxTitle = BoxTitle; -exports.Button = Button; -exports.ButtonIcon = ButtonIcon; +exports.Button = Button$1; +exports.ButtonIcon = ButtonIcon$5; exports.Dropdown = Dropdown; exports.Input = Input; exports.Modal = Modal; exports.Notifications = Notifications; exports.Pagination = Pagination; exports.Post = Post; +exports.ProgressBar = ProgressBar; +exports.RadioCheckboxGroup = RadioCheckboxGroup; +exports.RadioCheckboxInput = RadioCheckboxInput$1; +exports.Toggle = Toggle; diff --git a/packages/core/dist/shared-ui-react.esm.js b/packages/core/dist/shared-ui-react.esm.js index acef3aea..3d17cd38 100644 --- a/packages/core/dist/shared-ui-react.esm.js +++ b/packages/core/dist/shared-ui-react.esm.js @@ -1,26 +1,49 @@ -import React, { Component, Children, Fragment, useState, useCallback, useEffect } from 'react'; +import React, { Children, Fragment, Component, useState, useEffect, useCallback } from 'react'; import styled from 'styled-components'; -import AriaModal from '@justfixnyc/react-aria-modal'; +import ReactDOM from 'react-dom'; -function _extends() { - _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; +function ownKeys$8(object, enumerableOnly) { + var keys = Object.keys(object); - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - return target; - }; + return keys; +} - return _extends.apply(this, arguments); +function _objectSpread2$8(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { + _defineProperty$9(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; } -function _objectWithoutPropertiesLoose(source, excluded) { +function _defineProperty$9(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _objectWithoutPropertiesLoose$d(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -35,10 +58,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { return target; } -function _objectWithoutProperties(source, excluded) { +function _objectWithoutProperties$d(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); + var target = _objectWithoutPropertiesLoose$d(source, excluded); var key, i; @@ -56,265 +79,268 @@ function _objectWithoutProperties(source, excluded) { return target; } -function _taggedTemplateLiteral(strings, raw) { - if (!raw) { - raw = strings.slice(0); - } +var _excluded$d = ["label", "icon", "iconRight", "design", "color", "className", "loading"]; - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } +var Button$1 = function Button(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconRight = _ref.iconRight, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$d(_ref, _excluded$d); + + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !iconRight && '' !== icon && /*#__PURE__*/React.createElement("span", { + className: 'sui-icon-' + icon, + "aria-hidden": "true" + }), label, icon && iconRight && '' !== icon && /*#__PURE__*/React.createElement("span", { + className: 'sui-icon-' + icon, + "aria-hidden": "true" })); -} + className = "sui-button".concat(iconRight ? ' sui-button-icon-right' : '').concat(className ? ' ' + className : ''); // Set button color. + + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; + + case 'gray': + default: + className += ''; + break; + } // Set button style. -function _templateObject3() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tdisplay: ", ";\n\t", "\n\t", "\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-top-width: ", "px;\n\t", "\n\n\t", "\n\t", "\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); - _templateObject3 = function _templateObject3() { - return data; - }; + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; + break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = 'button'; + + if (props.href) { + htmlTag = 'a'; + } else if (props.htmlFor) { + htmlTag = 'label'; + } + + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$8({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); +}; + +function ownKeys$7(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - return data; + return keys; } -function _templateObject2() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-top-width: ", "px;\n\tborder-bottom-width: ", "px;\n\ttext-align: ", ";\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); +function _objectSpread2$7(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { + _defineProperty$8(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; +} - _templateObject2 = function _templateObject2() { - return data; - }; +function _defineProperty$8(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - return data; + return obj; } -function _templateObject() { - var data = _taggedTemplateLiteral(["\n.sui-wrap && {\n\tdisplay: ", ";\n\t", "\n\t", "\n\tmargin: 0;\n\tpadding-top: ", "px;\n\tpadding-right: ", "px;\n\tpadding-bottom: ", "px;\n\tpadding-left: ", "px;\n\tborder: 0 solid #E6E6E6;\n\tborder-bottom-width: ", "px;\n\t", "\n\n\t", "\n\t", "\n\n\t@media ", " {\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t}\n}\n"]); +function _objectWithoutPropertiesLoose$c(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject = function _templateObject() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -var utils = { - gutter: 30, - gutter_md: 20 -}; -var screen = { - mobile: 480, - tablet: 783, - laptop: 1200, - desktop: 1500 -}; -var device = { - mobile: "(min-width: ".concat(screen.mobile, "px)"), - tablet: "(min-width: ".concat(screen.tablet, "px)"), - laptop: "(min-width: ".concat(screen.laptop, "px)"), - desktop: "(min-width: ".concat(screen.desktop, "px)") -}; +function _objectWithoutProperties$c(source, excluded) { + if (source == null) return {}; -var Box = function Box(_ref) { - var children = _ref.children, - className = _ref.className, - props = _objectWithoutProperties(_ref, ["children", "className"]); + var target = _objectWithoutPropertiesLoose$c(source, excluded); - return /*#__PURE__*/React.createElement("div", _extends({ - className: 'undefined' !== typeof className && '' !== className ? "sui-box ".concat(className) : 'sui-box' - }, props), children); -}; + var key, i; -var BoxTitle = function BoxTitle(_ref2) { - var icon = _ref2.icon, - tagLabel = _ref2.tagLabel, - tagColor = _ref2.tagColor, - tagSize = _ref2.tagSize, - tagDesign = _ref2.tagDesign, - className = _ref2.className, - children = _ref2.children, - props = _objectWithoutProperties(_ref2, ["icon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"]); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - var tagClass = 'sui-tag'; + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - switch (tagColor) { - case 'red': - case 'yellow': - case 'green': + return target; +} + +var _excluded$c = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + +var ButtonIcon$5 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$c(_ref, _excluded$c); + + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. + + switch (color) { case 'blue': + case 'green': + case 'red': + case 'orange': case 'purple': - tagClass += ' sui-tag-' + tagColor; + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - } - switch (tagSize) { - case 'sm': - case 'small': - tagClass += ' sui-tag-sm'; + case 'gray': + default: + className += ''; break; - } + } // Set button style. - switch (tagDesign) { + + switch (design) { + case 'ghost': case 'outlined': - tagClass += ' sui-tag-ghost'; + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; } - return /*#__PURE__*/React.createElement("h3", _extends({ - className: 'undefined' !== typeof className && '' !== className ? "sui-box-title ".concat(className) : 'sui-box-title' - }, props), icon && "" !== icon && /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(icon, " sui-md"), - "aria-hidden": "true" - }), children, tagLabel && '' !== tagLabel && /*#__PURE__*/React.createElement("span", { - className: tagClass, - style: { - marginLeft: 10 - } - }, tagLabel)); + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$7({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -var Header = styled.div.attrs(function (props) { - return { - props: props - }; -})(_templateObject(), function (props) { - return 'block' !== props.display ? 'flex' : 'block'; -}, function (props) { - return 'block' !== props.display && 'flex-flow: row wrap;'; -}, function (props) { - return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; -}, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md / 2; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md / 2; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.border || 0 === props.border ? props.border : 1; -}, function (props) { - return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; -}, function (props) { - return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; -}, function (props) { - return 'block' !== props.display && '> * + * { margin-left: 10px; }'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter / 2; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter / 2; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); - -var BoxHeader = function BoxHeader(_ref3) { - var title = _ref3.title, - titleIcon = _ref3.titleIcon, - tagLabel = _ref3.tagLabel, - tagColor = _ref3.tagColor, - tagSize = _ref3.tagSize, - tagDesign = _ref3.tagDesign, - className = _ref3.className, - children = _ref3.children, - props = _objectWithoutProperties(_ref3, ["title", "titleIcon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"]); - - return /*#__PURE__*/React.createElement(Header, props, title && '' !== title && /*#__PURE__*/React.createElement(BoxTitle, { - icon: titleIcon, - tagLabel: tagLabel, - tagColor: tagColor, - tagSize: tagSize, - tagDesign: tagDesign - }, title), children); -}; - -var Body = styled.div.attrs(function (props) { - return { - props: props - }; -})(_templateObject2(), function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.borderTop || 0 === props.borderTop ? props.borderTop : 0; -}, function (props) { - return props.borderBottom || 0 === props.borderBottom ? props.borderBottom : 0; -}, function (props) { - return props.alignment || 'left'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); - -var BoxBody = function BoxBody(_ref4) { - var className = _ref4.className, - children = _ref4.children, - props = _objectWithoutProperties(_ref4, ["className", "children"]); +function _typeof$1(obj) { + "@babel/helpers - typeof"; - return /*#__PURE__*/React.createElement(Body, _extends({ - className: className - }, props), children); -}; + return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, _typeof$1(obj); +} -var Footer = styled.div.attrs(function (props) { - return { - props: props - }; -})(_templateObject3(), function (props) { - return 'block' !== props.display ? 'flex' : 'block'; -}, function (props) { - return 'block' !== props.display && 'flex-flow: row wrap;'; -}, function (props) { - return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; -}, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; -}, function (props) { - return props.border || 0 === props.border || '' === props.border ? props.border : 1; -}, function (props) { - return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; -}, function (props) { - return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; -}, function (props) { - return 'block' !== props.display && '> * + * { margin-left: 10px; }'; -}, device.tablet, function (props) { - return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; -}, function (props) { - return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; -}, function (props) { - return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; -}, function (props) { - return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; -}); +function _classCallCheck$3(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} -var BoxFooter = function BoxFooter(_ref5) { - var className = _ref5.className, - children = _ref5.children, - props = _objectWithoutProperties(_ref5, ["className", "children"]); +function _defineProperties$3(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} - return /*#__PURE__*/React.createElement(Footer, _extends({ - className: className - }, props), children); -}; +function _createClass$3(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$3(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$3(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); + return Constructor; +} -function _extends$1() { - _extends$1 = Object.assign || function (target) { +function _extends$a() { + _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -328,10 +354,147 @@ function _extends$1() { return target; }; - return _extends$1.apply(this, arguments); + return _extends$a.apply(this, arguments); } -function _objectWithoutPropertiesLoose$1(source, excluded) { +function _inherits$3(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$3(subClass, superClass); +} + +function _getPrototypeOf$3(o) { + _getPrototypeOf$3 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf$3(o); +} + +function _setPrototypeOf$3(o, p) { + _setPrototypeOf$3 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf$3(o, p); +} + +function _isNativeReflectConstruct$3() { + if (typeof Reflect === "undefined" || !Reflect.construct) return false; + if (Reflect.construct.sham) return false; + if (typeof Proxy === "function") return true; + + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); + return true; + } catch (e) { + return false; + } +} + +function _assertThisInitialized$3(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +function _possibleConstructorReturn$3(self, call) { + if (call && (_typeof$1(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } + + return _assertThisInitialized$3(self); +} + +function _createSuper$3(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); + + return function _createSuperInternal() { + var Super = _getPrototypeOf$3(Derived), + result; + + if (hasNativeReflectConstruct) { + var NewTarget = _getPrototypeOf$3(this).constructor; + + result = Reflect.construct(Super, arguments, NewTarget); + } else { + result = Super.apply(this, arguments); + } + + return _possibleConstructorReturn$3(this, result); + }; +} + +function _taggedTemplateLiteral$3(strings, raw) { + if (!raw) { + raw = strings.slice(0); + } + + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); +} + +function ownKeys$6(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + + return keys; +} + +function _objectSpread2$6(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { + _defineProperty$7(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; +} + +function _defineProperty$7(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _objectWithoutPropertiesLoose$b(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -346,10 +509,10 @@ function _objectWithoutPropertiesLoose$1(source, excluded) { return target; } -function _objectWithoutProperties$1(source, excluded) { +function _objectWithoutProperties$b(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$1(source, excluded); + var target = _objectWithoutPropertiesLoose$b(source, excluded); var key, i; @@ -367,94 +530,263 @@ function _objectWithoutProperties$1(source, excluded) { return target; } -var Input = function Input(_ref) { - var id = _ref.id, - size = _ref.size, - label = _ref.label, - description = _ref.description, - _ref$type = _ref.type, - type = _ref$type === void 0 ? 'text' : _ref$type, - props = _objectWithoutProperties$1(_ref, ["id", "size", "label", "description", "type"]); - - var uniqueId = id && '' !== id ? id : props.property; - var clazz = 'sui-form-control'; +var _excluded$b = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - switch (size) { - case 'sm': - case 'small': - clazz += ' sui-input-sm'; +var ButtonIcon$4 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$b(_ref, _excluded$b); + + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. + + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case 'md': - case 'medium': - clazz += ' sui-input-md'; + case 'gray': + default: + className += ''; + break; + } // Set button style. + + + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; + + case 'solid': + default: + className += ''; + break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; } - return /*#__PURE__*/React.createElement("div", { - className: "sui-form-field" - }, label && /*#__PURE__*/React.createElement("label", { - htmlFor: uniqueId, - className: "sui-label" - }, label), /*#__PURE__*/React.createElement("input", _extends$1({ - id: uniqueId, - type: type, - className: clazz - }, props)), description && /*#__PURE__*/React.createElement("p", { - className: "sui-description" - }, description)); + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$6({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } +var _templateObject$3, _templateObject2$2; - return obj; -} +var Link = styled.a(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral$3(["\n\t.sui-wrap && {\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\n\t\t[class*=\"sui-icon-\"]:before {\n\t\t\tcolor: inherit !important;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t}\n\t}\n"])), function (props) { + return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; +}, function (props) { + return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; +}); +var Button = styled.button(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral$3(["\n\t.sui-wrap && {\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\t\t", "\n\n\t\t[class*=\"sui-icon-\"]:before {\n\t\t\tcolor: inherit !important;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t\t", "\n\t\t}\n\n\t\t&[disabled] {\n\t\t\topacity: 0.5;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n"])), function (props) { + return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; +}, function (props) { + return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; +}, function (props) { + return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; +}, function (props) { + return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; +}, function (props) { + return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; +}, function (props) { + return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; +}); -function ownKeys(object, enumerableOnly) { - var keys = Object.keys(object); +var Dropdown = /*#__PURE__*/function (_Component) { + _inherits$3(Dropdown, _Component); - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } + var _super = _createSuper$3(Dropdown); - return keys; -} + function Dropdown(props) { + var _this; -function _objectSpread2(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; + _classCallCheck$3(this, Dropdown); + + _this = _super.call(this, props); + _this.state = { + open: false + }; + _this.toggle = _this.toggle.bind(_assertThisInitialized$3(_this)); + _this.wrapperRef = /*#__PURE__*/React.createRef(); + _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized$3(_this)); + _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized$3(_this)); + return _this; + } - if (i % 2) { - ownKeys(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]); + _createClass$3(Dropdown, [{ + key: "toggle", + value: function toggle() { + this.setState(function (state) { + return { + open: !state.open + }; }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + } + }, { + key: "setWrapperRef", + value: function setWrapperRef(node) { + this.wrapperRef = node; + } + }, { + key: "handleClickOutside", + value: function handleClickOutside(e) { + if (this.wrapperRef && !this.wrapperRef.contains(e.target)) { + this.setState({ + open: false + }); + } + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + document.addEventListener('mousedown', this.handleClickOutside); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + document.removeEventListener('mousedown', this.handleClickOutside); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var open = this.state.open; + var options = Children.map(this.props.children, function (option) { + var icon = option.props.icon && '' !== option.props.icon && /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(option.props.icon), + "aria-hidden": "true" + }); + var tag = option.props.tag && '' !== option.props.tag && /*#__PURE__*/React.createElement("span", { + className: "sui-tag sui-tag-beta", + style: { + pointerEvents: 'none', + display: 'inline', + marginLeft: 5, + lineHeight: 1 + } + }, option.props.tag); + var label = /*#__PURE__*/React.createElement(Fragment, null, icon, option.props.name, tag); + + if (option.props.href) { + return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Link, _extends$a({ + href: option.props.href + }, option.props), label)); + } + + return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Button, option.props, label)); }); + var clazz = !open ? 'sui-dropdown' : 'sui-dropdown open'; + + switch (this.props.position) { + case 'center': + clazz += ' sui-dropdown-center'; + break; + + case 'right': + clazz += ' sui-dropdown-left'; + break; + + default: + clazz += ' sui-dropdown-right'; + break; + } + + return /*#__PURE__*/React.createElement("div", { + className: clazz, + ref: this.setWrapperRef, + onClick: function onClick(e) { + return e.stopPropagation(); + } + }, /*#__PURE__*/React.createElement(ButtonIcon$4, _extends$a({ + icon: "widget-settings-config", + label: open ? 'Open menu' : 'Close menu', + onClick: this.toggle + }, this.props)), open && /*#__PURE__*/React.createElement("ul", { + onClick: function onClick() { + return _this2.setState({ + open: false + }); + } + }, options)); } - } + }]); - return target; + return Dropdown; +}(Component); + +function _extends$9() { + _extends$9 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$9.apply(this, arguments); } -function _objectWithoutPropertiesLoose$2(source, excluded) { +function _objectWithoutPropertiesLoose$1$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -469,10 +801,10 @@ function _objectWithoutPropertiesLoose$2(source, excluded) { return target; } -function _objectWithoutProperties$2(source, excluded) { +function _objectWithoutProperties$1$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$2(source, excluded); + var target = _objectWithoutPropertiesLoose$1$2(source, excluded); var key, i; @@ -490,165 +822,26 @@ function _objectWithoutProperties$2(source, excluded) { return target; } -var Button = function Button(_ref) { - var label = _ref.label, - icon = _ref.icon, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$2(_ref, ["label", "icon", "design", "color", "className", "loading"]); +function _slicedToArray$4(arr, i) { + return _arrayWithHoles$4(arr) || _iterableToArrayLimit$4(arr, i) || _unsupportedIterableToArray$4(arr, i) || _nonIterableRest$4(); +} - var loader = /*#__PURE__*/React.createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, - "aria-hidden": "true" - }); - var content = /*#__PURE__*/React.createElement(React.Fragment, null, icon && "" !== icon && /*#__PURE__*/React.createElement("span", { - className: "sui-icon-" + icon, - "aria-hidden": "true" - }), label); - className = "sui-button".concat(className ? ' ' + className : ''); // Set button color. - - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; - - case "gray": - default: - className += ""; - break; - } // Set button style. - - - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; - - case "solid": - default: - className += ""; - break; - } // Set loading class. - - - if (loading) { - className += " sui-button-onload"; - } - - var htmlTag = 'button'; - - if (props.href) { - htmlTag = 'a'; - } else if (props.htmlFor) { - htmlTag = 'label'; - } - - return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; - -function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function _typeof(obj) { - return typeof obj; - }; - } else { - _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); -} - -function _extends$2() { - _extends$2 = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends$2.apply(this, arguments); -} - -function _objectWithoutPropertiesLoose$3(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; - } - - return target; -} - -function _objectWithoutProperties$3(source, excluded) { - if (source == null) return {}; - - var target = _objectWithoutPropertiesLoose$3(source, excluded); - - var key, i; - - if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - - for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; - } - } - - return target; -} - -function _slicedToArray(arr, i) { - return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); -} - -function _arrayWithHoles(arr) { +function _arrayWithHoles$4(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; +function _iterableToArrayLimit$4(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -667,16 +860,16 @@ function _iterableToArrayLimit(arr, i) { return _arr; } -function _unsupportedIterableToArray(o, minLen) { +function _unsupportedIterableToArray$4(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$4(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$4(o, minLen); } -function _arrayLikeToArray(arr, len) { +function _arrayLikeToArray$4(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -686,109 +879,37 @@ function _arrayLikeToArray(arr, len) { return arr2; } -function _nonIterableRest() { +function _nonIterableRest$4() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -var Modal = function Modal(_ref) { - var modalContent = _ref.modalContent, - triggerContent = _ref.triggerContent, - props = _objectWithoutProperties$3(_ref, ["modalContent", "triggerContent"]); - - var _React$useState = React.useState(false), - _React$useState2 = _slicedToArray(_React$useState, 2), - isOpen = _React$useState2[0], - setIsOpen = _React$useState2[1]; - - var _React$useState3 = React.useState(false), - _React$useState4 = _slicedToArray(_React$useState3, 2), - isClosing = _React$useState4[0], - setIsClosing = _React$useState4[1]; // States for sliders. - - - var _React$useState5 = React.useState(props.firstSlide), - _React$useState6 = _slicedToArray(_React$useState5, 2), - currentSlide = _React$useState6[0], - setCurrentSlide = _React$useState6[1]; - - var _React$useState7 = React.useState(null), - _React$useState8 = _slicedToArray(_React$useState7, 2), - slideDirection = _React$useState8[0], - setSlideDirection = _React$useState8[1]; - - React.useEffect(function () { - if (!props.dialogId) { - throw new Error('SUI Modal instances should have a `dialogId`'); - } - }, []); - var isSlider = 'object' === _typeof(modalContent) && null !== modalContent; - - var openModal = function openModal() { - return setIsOpen(true); - }, - closeModal = function closeModal() { - // Close the modal with the exit animation and reset the slider. - setIsClosing(true); - setTimeout(function () { - setIsOpen(false); - setIsClosing(false); - - if (isSlider) { - setSlideDirection(null); - setCurrentSlide(props.firstSlide); - } - }, 300); - }, - slideTo = function slideTo(slide) { - var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left'; - setCurrentSlide(slide); - setSlideDirection(direction); - }; - - var _props$getApplication = props.getApplicationNode, - getApplicationNode = _props$getApplication === void 0 ? function () { - return document.getElementsByClassName('sui-wrap')[0]; - } : _props$getApplication; - var dialogClass = "sui-modal-content sui-content-".concat(isClosing ? 'fade-out' : 'fade-in', " ").concat(props.dialogClass || ""); - var renderContent, modalSize, initialFocus; - - if (!isSlider) { - // Not a slider, we can just render the content. - renderContent = modalContent; - modalSize = props.size; - initialFocus = props.initialFocus || false; - } else { - // Render the content from the given slides. - renderContent = modalContent[currentSlide].render; - initialFocus = modalContent[currentSlide].focus || false; - modalSize = modalContent[currentSlide].size; // Add the slide direction class when provided and we're not closing the modal. +function ownKeys$5(object, enumerableOnly) { + var keys = Object.keys(object); - if (slideDirection && !isClosing) { - dialogClass += "sui-modal-slide sui-active sui-fadein-".concat(slideDirection); - } - } // Use 'isOpen' as an alias of 'mounted' if not defined. + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + return keys; +} - if ('undefined' === typeof props.mounted) { - props.mounted = isOpen; +function _objectSpread2$5(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { + _defineProperty$6(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } - var AltModal = props.renderToNode ? AriaModal.renderTo(props.renderToNode) : AriaModal; - return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AltModal, _extends$2({ - getApplicationNode: getApplicationNode, - dialogClass: dialogClass, - underlayClass: "sui-modal sui-active sui-modal-".concat(modalSize || 'md', " sui-wrap ").concat(props.underlayClass || ''), - includeDefaultStyles: false, - initialFocus: initialFocus - }, props), renderContent({ - closeModal: closeModal, - slideTo: slideTo - })), triggerContent && triggerContent({ - openModal: openModal - })); -}; + return target; +} -function _defineProperty$1(obj, key, value) { +function _defineProperty$6(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, @@ -803,41 +924,7 @@ function _defineProperty$1(obj, key, value) { return obj; } -function ownKeys$1(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$1(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys$1(Object(source), true).forEach(function (key) { - _defineProperty$1(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$1(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } - } - - return target; -} - -function _objectWithoutPropertiesLoose$4(source, excluded) { +function _objectWithoutPropertiesLoose$a(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -852,10 +939,10 @@ function _objectWithoutPropertiesLoose$4(source, excluded) { return target; } -function _objectWithoutProperties$4(source, excluded) { +function _objectWithoutProperties$a(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$4(source, excluded); + var target = _objectWithoutPropertiesLoose$a(source, excluded); var key, i; @@ -873,21 +960,23 @@ function _objectWithoutProperties$4(source, excluded) { return target; } -var ButtonIcon = function ButtonIcon(_ref) { +var _excluded$1$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + +var ButtonIcon$3 = function ButtonIcon(_ref) { var label = _ref.label, icon = _ref.icon, iconSize = _ref.iconSize, _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, + design = _ref$design === void 0 ? 'solid' : _ref$design, color = _ref.color, className = _ref.className, loading = _ref.loading, - props = _objectWithoutProperties$4(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); + props = _objectWithoutProperties$a(_ref, _excluded$1$2); var loader = /*#__PURE__*/React.createElement("span", { className: "sui-icon-loader sui-loading", style: { - position: "relative" + position: 'relative' }, "aria-hidden": "true" }); @@ -900,70 +989,143 @@ var ButtonIcon = function ButtonIcon(_ref) { className = "sui-button-icon ".concat(className || ''); // Set button color. switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case "gray": + case 'gray': default: - className += ""; + className += ''; break; } // Set button style. switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; - case "solid": + case 'solid': default: - className += ""; + className += ''; break; } // Set loading class. if (loading) { - className += " sui-button-onload"; + className += ' sui-button-onload'; } var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$1({ + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$5({ className: className, disabled: props.disabled || loading }, props), loading ? loader : content); }; -function _typeof$1(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof$1 = function (obj) { - return typeof obj; - }; - } else { - _typeof$1 = function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof$1(obj); -} +var _excluded$a = ["id", "label", "description", "type", "errorStatus", "errorDescription", "size", "fieldSize", "suffix", "prefix"]; -function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); +var Input = function Input(_ref) { + var id = _ref.id, + label = _ref.label, + description = _ref.description, + _ref$type = _ref.type, + type = _ref$type === void 0 ? 'text' : _ref$type, + errorStatus = _ref.errorStatus, + errorDescription = _ref.errorDescription, + size = _ref.size, + fieldSize = _ref.fieldSize, + suffix = _ref.suffix, + prefix = _ref.prefix, + props = _objectWithoutProperties$1$2(_ref, _excluded$a); + + var uniqueId = id && '' !== id ? id : props.property; + + var _useState = useState(true), + _useState2 = _slicedToArray$4(_useState, 2), + showIcon = _useState2[0], + setShowIcon = _useState2[1]; + + var fieldClasses = 'sui-form-field'; + + switch (fieldSize) { + case 'sm': + case 'small': + fieldClasses += ' sui-input-sm'; + break; + + case 'md': + case 'medium': + fieldClasses += ' sui-input-md'; + break; + } + + if (errorStatus) { + fieldClasses += ' sui-form-field-error'; + } + + var inputClasses = 'sui-form-control'; + suffix && (inputClasses += ' sui-field-has-suffix'); + prefix && (inputClasses += ' sui-field-has-prefix'); + + switch (size) { + case 'sm': + case 'small': + inputClasses += ' sui-input-sm'; + break; + + case 'md': + case 'medium': + inputClasses += ' sui-input-md'; + break; + } + + return /*#__PURE__*/React.createElement("div", { + className: fieldClasses + }, label && /*#__PURE__*/React.createElement("label", { + htmlFor: uniqueId, + className: "sui-label" + }, label), prefix && /*#__PURE__*/React.createElement("span", { + className: "sui-field-prefix" + }, prefix), type === 'password' ? /*#__PURE__*/React.createElement("div", { + className: "sui-with-button sui-with-button-icon" + }, /*#__PURE__*/React.createElement("input", _extends$9({ + id: uniqueId, + type: showIcon ? type : 'text', + className: inputClasses + }, props)), /*#__PURE__*/React.createElement(ButtonIcon$3, { + icon: showIcon ? "eye" : "eye-hide", + label: showIcon ? "Show password" : "Hide password", + onClick: function onClick() { + setShowIcon(!showIcon); + } + })) : /*#__PURE__*/React.createElement("input", _extends$9({ + id: uniqueId, + type: type, + className: inputClasses + }, props)), suffix && /*#__PURE__*/React.createElement("span", { + className: "sui-field-suffix" + }, suffix), errorStatus && errorDescription && /*#__PURE__*/React.createElement("div", { + className: "sui-error-message" + }, errorDescription), description && /*#__PURE__*/React.createElement("p", { + className: "sui-description" + }, description)); +}; + +function _classCallCheck$2(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); } } -function _defineProperties(target, props) { +function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; @@ -973,13 +1135,16 @@ function _defineProperties(target, props) { } } -function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); +function _createClass$2(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$2(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } -function _defineProperty$2(obj, key, value) { +function _defineProperty$1$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, @@ -994,25 +1159,7 @@ function _defineProperty$2(obj, key, value) { return obj; } -function _extends$3() { - _extends$3 = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends$3.apply(this, arguments); -} - -function _inherits(subClass, superClass) { +function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } @@ -1024,39 +1171,42 @@ function _inherits(subClass, superClass) { configurable: true } }); - if (superClass) _setPrototypeOf(subClass, superClass); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$2(subClass, superClass); } -function _getPrototypeOf(o) { - _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { +function _getPrototypeOf$2(o) { + _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; - return _getPrototypeOf(o); + return _getPrototypeOf$2(o); } -function _setPrototypeOf(o, p) { - _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { +function _setPrototypeOf$2(o, p) { + _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; - return _setPrototypeOf(o, p); + return _setPrototypeOf$2(o, p); } -function _isNativeReflectConstruct() { +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function _assertThisInitialized(self) { +function _assertThisInitialized$2(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } @@ -1064,393 +1214,341 @@ function _assertThisInitialized(self) { return self; } -function _possibleConstructorReturn(self, call) { +function _possibleConstructorReturn$2(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); } - return _assertThisInitialized(self); + return _assertThisInitialized$2(self); } -function _createSuper(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct(); +function _createSuper$2(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { - var Super = _getPrototypeOf(Derived), + var Super = _getPrototypeOf$2(Derived), result; if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf(this).constructor; + var NewTarget = _getPrototypeOf$2(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } - return _possibleConstructorReturn(this, result); + return _possibleConstructorReturn$2(this, result); }; } -function _taggedTemplateLiteral$1(strings, raw) { - if (!raw) { - raw = strings.slice(0); +function ownKeys$4(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); } - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } - })); + return keys; } -function _templateObject8() { - var data = _taggedTemplateLiteral$1(["\n\tmin-width: 1px;\n\tflex: 1;\n\t", "\n\tcolor: #17A8E3 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px !important;\n"]); - - _templateObject8 = function _templateObject8() { - return data; - }; +function _objectSpread2$4(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { + _defineProperty$5(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } - return data; + return target; } -function _templateObject7() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: block;\n\t", "\n\n\tp {\n\t\toverflow: hidden;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\tborder: 0;\n\t\tcolor: #888 !important;\n\t\tfont-size: 13px !important;\n\t\tline-height: 22px !important;\n\t\tletter-spacing: -0.2px;\n\t\t-webkit-line-clamp: ", ";\n\t}\n"]); - - _templateObject7 = function _templateObject7() { - return data; - }; +function _defineProperty$5(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - return data; + return obj; } -function _templateObject6() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\tmargin: 0 !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tcolor: #888 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tletter-spacing: -0.2px;\n\n\t", "\n"]); +function _objectWithoutPropertiesLoose$9(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject6 = function _templateObject6() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -function _templateObject5() { - var data = _taggedTemplateLiteral$1(["\n\toverflow: hidden;\n\tdisplay: -webkit-box !important;\n\t-webkit-box-orient: vertical;\n\t", "\n\tmargin: ", " !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px;\n\t", "\n\n\t", "\n"]); +function _objectWithoutProperties$9(source, excluded) { + if (source == null) return {}; - _templateObject5 = function _templateObject5() { - return data; - }; + var target = _objectWithoutPropertiesLoose$9(source, excluded); - return data; -} + var key, i; -function _templateObject4() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\theight: ", ";\n\tmargin: ", ";\n\t", "\n\tdisplay: block;\n\t", "\n\tbackground-color: #FFF;\n\tbackground-image: url(", ");\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n"]); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - _templateObject4 = function _templateObject4() { - return data; - }; + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - return data; + return target; } -function _templateObject3$1() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-flow: row wrap;\n\talign-items: center;\n\tmargin-top: 15px;\n"]); +var _excluded$9 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - _templateObject3$1 = function _templateObject3() { - return data; - }; +var ButtonIcon$2 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$9(_ref, _excluded$9); - return data; -} + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. -function _templateObject2$1() { - var data = _taggedTemplateLiteral$1(["\n\tdisplay: flex;\n\tflex-flow: row wrap;\n\n\t+ div {\n\t\tmargin-top: 20px;\n\t}\n"]); + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; - _templateObject2$1 = function _templateObject2() { - return data; - }; + case 'gray': + default: + className += ''; + break; + } // Set button style. - return data; -} -function _templateObject$1() { - var data = _taggedTemplateLiteral$1(["\n\t", "\n\tcursor: pointer;\n\t", "\n\t", "\n\tpadding: ", ";\n\tborder-radius: 4px;\n\tbackground-color: #fff;\n\t", "\n\ttransition: 0.2s ease all;\n\n\t* {\n\t\tpointer-events: none;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t", "\n\n\t\t", "\n\t}\n\n\t", "\n\n\t&:focus {\n\t\toutline: none;\n\t\t", "\n\t}\n\n\t@media ", " {\n\t\t", "\n\t}\n"]); + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; - _templateObject$1 = function _templateObject() { - return data; - }; + case 'solid': + default: + className += ''; + break; + } // Set loading class. - return data; -} -var aria = aria || {}; -aria.KeyCode = { - TAB: 9, - RETURN: 13, - ESC: 27, - SPACE: 32, - PAGE_UP: 33, - PAGE_DOWN: 34, - END: 35, - HOME: 36, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - DELETE: 46 -}; -var screen$1 = { - mobile: 480, - tablet: 783, - laptop: 1200, - desktop: 1500 -}; -var device$1 = { - mobile: "(min-width: ".concat(screen$1.mobile, "px)"), - tablet: "(min-width: ".concat(screen$1.tablet, "px)"), - laptop: "(min-width: ".concat(screen$1.laptop, "px)"), - desktop: "(min-width: ".concat(screen$1.desktop, "px)") + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$4({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); }; -var PostWrapper = styled.div.attrs(function (props) { - return { - tabIndex: 0, - props: props - }; -})(_templateObject$1(), function (props) { - return props.banner ? "overflow: hidden;" : ""; -}, function (props) { - return props.banner ? "display: flex;" : ""; -}, function (props) { - return props.banner ? "flex-flow: column nowrap;" : ""; -}, function (props) { - return props.banner ? "20px 20px 30px" : "10px"; -}, function (props) { - return props.banner ? "box-shadow: 0 0 0 1px #E6E6E6;" : ""; -}, function (props) { - return props.banner ? "transform: scale(1.02);" : "background-color: #FAFAFA;"; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t\ttransform: scale(1.05);\n\t\t\t}") : ""; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\tbox-shadow: 0 2px 7px 0 rgba(0,0,0,0.05);\n\t\t}") : ""; -}, function (props) { - return props.banner ? "box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;" : ""; -}, device$1.tablet, function (props) { - return props.banner ? "min-height: 100%;" : "padding: 15px;"; -}); -var PostHeader = styled.div(_templateObject2$1()); -var PostFooter = styled.div(_templateObject3$1()); -var FeaturedImage = styled.div.attrs(function () { - return { - tabIndex: "-1", - "aria-hidden": true - }; -})(_templateObject4(), function (props) { - return props.banner ? "" : "width: 66px;"; -}, function (props) { - return props.banner ? "140px" : "54px"; -}, function (props) { - return props.banner ? "-20px -20px 20px" : "0 10px 0 0"; -}, function (props) { - return props.banner ? "" : "border-radius: 4px;"; -}, function (props) { - return props.banner ? "flex: 0 0 auto;" : ""; -}, function (props) { - return props.src || "none"; -}); -var PostTitle = styled.h3(_templateObject5(), function (props) { - return props.banner ? "flex: 1 1 auto;" : ""; -}, function (props) { - return props.banner ? "0 0 10px" : "0"; -}, function (props) { - return props.banner ? "" : "-webkit-line-clamp: 2;"; -}, function (props) { - return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t-webkit-line-clamp: 2;\n\t\t}") : ""; -}); -var PostTime = styled.p(_templateObject6(), function (props) { - return props.banner ? "flex: 0 0 auto;" : ""; -}, function (props) { - return props.banner ? "* + & {\n\t\t\tmargin-left: 5px !important;\n\t\t}" : ""; -}); -var Excerpt = styled.div(_templateObject7(), function (props) { - return props.banner ? "flex: 1 1 auto;" : ""; -}, function (props) { - return props.banner ? "3" : "2"; -}); -var ReadMore = styled.p(_templateObject8(), function (props) { - return props.banner ? "" : "margin: 4px 0 0;"; -}); -var Post = /*#__PURE__*/function (_Component) { - _inherits(Post, _Component); +var Notifications = /*#__PURE__*/function (_Component) { + _inherits$2(Notifications, _Component); - var _super = _createSuper(Post); + var _super = _createSuper$2(Notifications); - function Post(props) { + function Notifications(props) { var _this; - _classCallCheck(this, Post); + _classCallCheck$2(this, Notifications); _this = _super.call(this, props); - _defineProperty$2(_assertThisInitialized(_this), "openLink", function (e) { - var ref = e.target !== null ? e.target : e.srcElement; - - if (ref) { - window.open(ref.getAttribute("data-href"), "_blank"); - } - }); - - _defineProperty$2(_assertThisInitialized(_this), "handleKeydown", function (e) { - var key = e.which || e.keyCode; - - switch (key) { - case aria.KeyCode.RETURN: - _this.openLink(e); + _defineProperty$1$1(_assertThisInitialized$2(_this), "close", function () { + _this.setState({ + hide: true + }); - break; - } + _this.props.cbFunction ? _this.props.cbFunction() : ''; }); _this.state = { - media: [], - error: null, - isLoaded: false + hide: false }; - _this.openLink = _this.openLink.bind(_assertThisInitialized(_this)); - _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized(_this)); + _this.close = _this.close.bind(_assertThisInitialized$2(_this)); return _this; } - _createClass(Post, [{ - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var API_URL = "https://wpmudev.com/blog/wp-json/wp/v2/media/"; - var QUERY_ID = this.props.media; // GET media using fetch. - - fetch(API_URL + QUERY_ID).then(function (response) { - return response.json(); - }).then(function (data) { - _this2.setState({ - isLoaded: true, - media: data.guid.rendered - }); - }, function (error) { - _this2.setState({ - isLoaded: true, - error: error - }); - }); - } - }, { + _createClass$2(Notifications, [{ key: "render", value: function render() { - var _this$state = this.state, - media = _this$state.media, - error = _this$state.error, - isLoaded = _this$state.isLoaded; - var translate = this.props.translate; - var read_article = translate && translate[0].read_article ? translate[0].read_article : "Read article"; - var min_read = translate && translate[0].min_read ? translate[0].min_read : "min read"; - var PostImage = ""; // Empty. + var _this2 = this; - if (this.props.image) { - PostImage = /*#__PURE__*/React.createElement(FeaturedImage, _extends$3({ - src: this.props.image, - alt: "" - }, this.props)); - } else { - if (error) { - PostImage = error.message; - } else if (!isLoaded) { - PostImage = /*#__PURE__*/React.createElement("p", { - style: { - textAlign: 'center' - } - }, /*#__PURE__*/React.createElement("span", { - className: "sui-icon-loader sui-loading", - "aria-hidden": "true" - }), /*#__PURE__*/React.createElement("span", { - className: "sui-screen-reader-text" - }, "Image is loading")); - } else { - PostImage = /*#__PURE__*/React.createElement(FeaturedImage, _extends$3({ - src: media - }, this.props)); - } - } + var hide = this.state.hide; + var classMain = 'sui-notice'; + var classIcon = 'sui-notice-icon sui-md'; - if (this.props.banner) { - return /*#__PURE__*/React.createElement(PostWrapper, this.props, PostImage, this.props.title && "" !== this.props.title && /*#__PURE__*/React.createElement(PostTitle, { - banner: true, - dangerouslySetInnerHTML: { - __html: this.props.title + switch (this.props.type) { + case 'info': + case 'success': + case 'warning': + case 'error': + case 'upsell': + classMain += ' sui-notice-' + this.props.type; + + if (this.props.loading) { + classIcon += ' sui-icon-loader sui-loading'; + } else { + classIcon += ' sui-icon-info'; } - }), this.props.excerpt && "" !== this.props.excerpt && /*#__PURE__*/React.createElement(Excerpt, { - banner: true, - dangerouslySetInnerHTML: { - __html: this.props.excerpt + + break; + + default: + if (this.props.loading) { + classIcon += ' sui-icon-loader sui-loading'; + } else { + classIcon += ' sui-icon-info'; } - }), /*#__PURE__*/React.createElement(PostFooter, { - banner: true - }, /*#__PURE__*/React.createElement(ReadMore, { - banner: true - }, read_article), this.props.time && "" !== this.props.time && /*#__PURE__*/React.createElement(PostTime, { - banner: true - }, /*#__PURE__*/React.createElement("span", { - className: "sui-icon-clock sui-sm", - style: { - verticalAlign: "middle", - marginRight: 5 - }, - "aria-hidden": "true" - }), this.props.time, " ", min_read))); + + break; } - return /*#__PURE__*/React.createElement(PostWrapper, this.props, /*#__PURE__*/React.createElement(PostHeader, null, PostImage, /*#__PURE__*/React.createElement("div", { - style: { - minWidth: "1px", - flex: 1 - } - }, this.props.title && "" !== this.props.title && /*#__PURE__*/React.createElement(PostTitle, { - dangerouslySetInnerHTML: { - __html: this.props.title - } - }), this.props.time && "" !== this.props.time && /*#__PURE__*/React.createElement(PostTime, null, "*", this.props.time, " ", min_read))), this.props.excerpt && "" !== this.props.excerpt && /*#__PURE__*/React.createElement(Excerpt, { - dangerouslySetInnerHTML: { - __html: this.props.excerpt + var lang = Object.assign({ + dismiss: 'Hide Notification' + }, this.props.sourceLang); + var message = /*#__PURE__*/React.createElement("div", { + className: "sui-notice-message" + }, /*#__PURE__*/React.createElement("span", { + className: classIcon, + "aria-hidden": "true" + }), this.props.children); + var actions = /*#__PURE__*/React.createElement("div", { + className: "sui-notice-actions" + }, /*#__PURE__*/React.createElement(ButtonIcon$2, { + icon: "check", + label: lang.dismiss, + onClick: function onClick(e) { + return _this2.close(e); } - }), /*#__PURE__*/React.createElement(ReadMore, null, read_article)); + })); + + if (!hide) { + return /*#__PURE__*/React.createElement("div", { + className: classMain + }, /*#__PURE__*/React.createElement("div", { + className: "sui-notice-content" + }, message, this.props.dismiss && actions)); + } + + return null; } }]); - return Post; + return Notifications; }(Component); -function _classCallCheck$1(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); +function ownKeys$3(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); } + + return keys; } -function _defineProperties$1(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); +function _objectSpread2$3(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { + _defineProperty$4(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } + + return target; } -function _createClass$1(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); - if (staticProps) _defineProperties$1(Constructor, staticProps); - return Constructor; +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { + try { + var info = gen[key](arg); + var value = info.value; + } catch (error) { + reject(error); + return; + } + + if (info.done) { + resolve(value); + } else { + Promise.resolve(value).then(_next, _throw); + } } -function _defineProperty$3(obj, key, value) { +function _asyncToGenerator(fn) { + return function () { + var self = this, + args = arguments; + return new Promise(function (resolve, reject) { + var gen = fn.apply(self, args); + + function _next(value) { + asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + } + + function _throw(err) { + asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + } + + _next(undefined); + }); + }; +} + +function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, @@ -1465,139 +1563,29 @@ function _defineProperty$3(obj, key, value) { return obj; } -function _inherits$1(subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function"); - } +function _extends$8() { + _extends$8 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } } - }); - if (superClass) _setPrototypeOf$1(subClass, superClass); -} - -function _getPrototypeOf$1(o) { - _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf$1(o); -} -function _setPrototypeOf$1(o, p) { - _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; + return target; }; - return _setPrototypeOf$1(o, p); + return _extends$8.apply(this, arguments); } -function _isNativeReflectConstruct$1() { - if (typeof Reflect === "undefined" || !Reflect.construct) return false; - if (Reflect.construct.sham) return false; - if (typeof Proxy === "function") return true; - - try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); - return true; - } catch (e) { - return false; - } -} - -function _assertThisInitialized$1(self) { - if (self === void 0) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return self; -} - -function _possibleConstructorReturn$1(self, call) { - if (call && (_typeof$1(call) === "object" || typeof call === "function")) { - return call; - } - - return _assertThisInitialized$1(self); -} - -function _createSuper$1(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); - - return function _createSuperInternal() { - var Super = _getPrototypeOf$1(Derived), - result; - - if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf$1(this).constructor; - - result = Reflect.construct(Super, arguments, NewTarget); - } else { - result = Super.apply(this, arguments); - } - - return _possibleConstructorReturn$1(this, result); - }; -} - -function _defineProperty$1$1(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - -function ownKeys$2(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$2(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys$2(Object(source), true).forEach(function (key) { - _defineProperty$1$1(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$2(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } - } - - return target; -} - -function _objectWithoutPropertiesLoose$5(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; +function _objectWithoutPropertiesLoose$8(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; @@ -1608,10 +1596,10 @@ function _objectWithoutPropertiesLoose$5(source, excluded) { return target; } -function _objectWithoutProperties$5(source, excluded) { +function _objectWithoutProperties$8(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$5(source, excluded); + var target = _objectWithoutPropertiesLoose$8(source, excluded); var key, i; @@ -1629,165 +1617,342 @@ function _objectWithoutProperties$5(source, excluded) { return target; } -var ButtonIcon$1 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$5(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); - - var loader = /*#__PURE__*/React.createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, - "aria-hidden": "true" - }); - var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), - "aria-hidden": "true" - }), /*#__PURE__*/React.createElement("span", { - className: "sui-screen-reader-text" - }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. - - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; - - case "gray": - default: - className += ""; - break; - } // Set button style. +function _slicedToArray$3(arr, i) { + return _arrayWithHoles$3(arr) || _iterableToArrayLimit$3(arr, i) || _unsupportedIterableToArray$3(arr, i) || _nonIterableRest$3(); +} +function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$3(arr) || _nonIterableSpread(); +} - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; +function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return _arrayLikeToArray$3(arr); +} - case "solid": - default: - className += ""; - break; - } // Set loading class. +function _arrayWithHoles$3(arr) { + if (Array.isArray(arr)) return arr; +} +function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); +} - if (loading) { - className += " sui-button-onload"; - } +function _iterableToArrayLimit$3(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$2({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; + if (_i == null) return; + var _arr = []; + var _n = true; + var _d = false; -var Notifications = /*#__PURE__*/function (_Component) { - _inherits$1(Notifications, _Component); + var _s, _e; - var _super = _createSuper$1(Notifications); + try { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); - function Notifications(props) { - var _this; + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } - _classCallCheck$1(this, Notifications); + return _arr; +} - _this = _super.call(this, props); +function _unsupportedIterableToArray$3(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray$3(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$3(o, minLen); +} - _defineProperty$3(_assertThisInitialized$1(_this), "close", function () { - _this.setState({ - hide: true - }); - }); +function _arrayLikeToArray$3(arr, len) { + if (len == null || len > arr.length) len = arr.length; - _this.state = { - hide: false - }; - _this.close = _this.close.bind(_assertThisInitialized$1(_this)); - return _this; + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; } - _createClass$1(Notifications, [{ - key: "render", - value: function render() { - var _this2 = this; + return arr2; +} - var hide = this.state.hide; - var classMain = "sui-notice"; - var classIcon = "sui-notice-icon sui-md"; +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} - switch (this.props.type) { - case "info": - case "success": - case "warning": - case "error": - case "upsell": - classMain += " sui-notice-" + this.props.type; - classIcon += " sui-icon-info"; - break; +function _nonIterableRest$3() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} - case "loading": - classIcon += " sui-icon-loader sui-loading"; - break; +var _excluded$8 = ["limit", "skip", "results", "skipToFirstLabel", "previousLabel", "nextLabel", "skipToLastLabel", "pagesToBottom"]; - default: - classIcon += " sui-icon-info"; - break; - } +var Pagination = function Pagination(_ref) { + var _componentWrapper$pro, _componentWrapper$pro2, _componentWrapper$pro3; - var message = /*#__PURE__*/React.createElement("div", { - className: "sui-notice-message" - }, /*#__PURE__*/React.createElement("span", { - className: classIcon, - "aria-hidden": "true" - }), this.props.children); - var actions = /*#__PURE__*/React.createElement("div", { - className: "sui-notice-actions" - }, /*#__PURE__*/React.createElement(ButtonIcon$1, { - icon: "check", - label: "Hide", - onClick: function onClick(e) { - return _this2.close(e); - } - })); + var limit = _ref.limit, + skip = _ref.skip, + results = _ref.results, + skipToFirstLabel = _ref.skipToFirstLabel, + previousLabel = _ref.previousLabel, + nextLabel = _ref.nextLabel, + skipToLastLabel = _ref.skipToLastLabel, + pagesToBottom = _ref.pagesToBottom, + args = _objectWithoutProperties$8(_ref, _excluded$8); - if (!hide) { - return /*#__PURE__*/React.createElement("div", { - className: classMain - }, /*#__PURE__*/React.createElement("div", { - className: "sui-notice-content" - }, message, this.props.dismiss && actions)); - } + var componentWrapper = args.children, + componentChildren = componentWrapper !== null && componentWrapper !== void 0 && (_componentWrapper$pro = componentWrapper.props) !== null && _componentWrapper$pro !== void 0 && _componentWrapper$pro.children ? (componentWrapper === null || componentWrapper === void 0 ? void 0 : (_componentWrapper$pro2 = componentWrapper.props) === null || _componentWrapper$pro2 === void 0 ? void 0 : (_componentWrapper$pro3 = _componentWrapper$pro2.children) === null || _componentWrapper$pro3 === void 0 ? void 0 : _componentWrapper$pro3.length) > 1 ? _toConsumableArray(componentWrapper.props.children) : [componentWrapper.props.children] : [], + childElements = [].concat(componentChildren), + elements = childElements.length, + pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit, + _useState = useState([]), + _useState2 = _slicedToArray$3(_useState, 2), + pagesArray = _useState2[0], + setPagesArray = _useState2[1], + _useState3 = useState('1'), + _useState4 = _slicedToArray$3(_useState3, 2), + selectedPage = _useState4[0], + setSelectedPage = _useState4[1], + _useState5 = useState(0), + _useState6 = _slicedToArray$3(_useState5, 2), + startIndex = _useState6[0], + setStartIndex = _useState6[1], + _useState7 = useState(pages >= 5 ? 5 : pages), + _useState8 = _slicedToArray$3(_useState7, 2), + endIndex = _useState8[0], + setEndIndex = _useState8[1], + _useState9 = useState(0), + _useState10 = _slicedToArray$3(_useState9, 2), + pageClickCounter = _useState10[0], + setPageClickCounter = _useState10[1], + _useState11 = useState(0), + _useState12 = _slicedToArray$3(_useState11, 2), + elementsStartIndex = _useState12[0], + setElementsStartIndex = _useState12[1], + _useState13 = useState(limit), + _useState14 = _slicedToArray$3(_useState13, 2), + elementsEndIndex = _useState14[0], + setElementsEndIndex = _useState14[1]; - return null; + useEffect(function () { + var pagesArray = []; + + for (var i = 1; i <= pages; ++i) { + pagesArray.push(i); } - }]); - return Notifications; -}(Component); + setPagesArray(pagesArray); + }, []); + useEffect(function () { + selectedPage >= endIndex && incrementIndexes(); + selectedPage <= startIndex + 1 && decrementIndexes(); + }, [pageClickCounter]); + useEffect(function () { + if (selectedPage !== '1') { + setElementsStartIndex(selectedPage * limit - limit); + setElementsEndIndex(selectedPage * limit); + } + }, [selectedPage]); -function _classCallCheck$2(instance, Constructor) { + var handleSkipToFirstPage = function handleSkipToFirstPage() { + setSelectedPage(1); + setStartIndex(0); + setEndIndex(pages >= 5 ? 5 : pages); + }; + + var handleSkipToLastPage = function handleSkipToLastPage() { + setSelectedPage(pages); + setStartIndex(pages >= 5 ? pages - 5 : 0); + setEndIndex(pages); + }; + + var handlePreviousPage = function handlePreviousPage() { + selectedPage > 1 && setSelectedPage(selectedPage - 1); + decrementIndexes(); + }; + + var handleNextPage = function handleNextPage() { + selectedPage < pages && setSelectedPage(parseInt(selectedPage) + 1); + incrementIndexes(); + }; + + var decrementIndexes = function decrementIndexes() { + if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) { + setStartIndex(startIndex - 1); + setEndIndex(endIndex - 1); + } + }; + + var incrementIndexes = function incrementIndexes() { + if (selectedPage + 1 >= endIndex && endIndex !== pages) { + setStartIndex(startIndex + 1); + setEndIndex(endIndex + 1); + } + }; + + var handlePreviousEllipsis = function handlePreviousEllipsis() { + setSelectedPage(startIndex >= 5 ? endIndex - 6 : endIndex - startIndex - 1); + setStartIndex(startIndex >= 5 ? startIndex - 5 : 0); + setEndIndex(startIndex >= 5 ? endIndex - 5 : endIndex - startIndex); + }; + + var handleNextEllipsis = function handleNextEllipsis() { + setSelectedPage(pages - endIndex >= 5 ? startIndex + 7 : pages - endIndex + startIndex + 2); + setStartIndex(pages - endIndex >= 5 ? startIndex + 5 : pages - endIndex + startIndex); + setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages); + }; + + var handlePageClick = /*#__PURE__*/function () { + var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(page) { + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + setSelectedPage(page); + setPageClickCounter(pageClickCounter + 1); + + case 2: + case "end": + return _context.stop(); + } + } + }, _callee); + })); + + return function handlePageClick(_x) { + return _ref2.apply(this, arguments); + }; + }(); + + var properties = { + componentWrapper: componentWrapper, + childElements: childElements, + elementsStartIndex: elementsStartIndex, + elementsEndIndex: elementsEndIndex, + handlePageClick: handlePageClick, + handleNextEllipsis: handleNextEllipsis, + handlePreviousEllipsis: handlePreviousEllipsis, + handleNextPage: handleNextPage, + handlePreviousPage: handlePreviousPage, + handleSkipToLastPage: handleSkipToLastPage, + handleSkipToFirstPage: handleSkipToFirstPage, + pagesArray: pagesArray, + selectedPage: selectedPage, + startIndex: startIndex, + endIndex: endIndex, + pages: pages, + skipToFirstLabel: skipToFirstLabel, + previousLabel: previousLabel, + nextLabel: nextLabel, + skipToLastLabel: skipToLastLabel, + skip: skip, + results: results, + elements: elements + }; + if (args !== null && args !== void 0 && args.paginationContent) return /*#__PURE__*/React.createElement(React.Fragment, null, args === null || args === void 0 ? void 0 : args.paginationContent(_objectSpread2$3({}, properties)));else return /*#__PURE__*/React.createElement(React.Fragment, null, pagesToBottom && PaginationResults(_objectSpread2$3({}, properties)), PaginationNav(_objectSpread2$3({}, properties)), !pagesToBottom && PaginationResults(_objectSpread2$3({}, properties))); +}; + +var PaginationResults = function PaginationResults(_ref3) { + var _React$Children$map; + + var properties = _extends$8({}, _ref3); + + var items = (_React$Children$map = React.Children.map(properties.childElements, function (data) { + return /*#__PURE__*/React.cloneElement(data); + })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.slice(properties.elementsStartIndex, properties.elementsEndIndex); + return React.Children.map(properties.componentWrapper, function (data) { + return /*#__PURE__*/React.cloneElement(data, '', items); + }); +}; + +var PaginationNav = function PaginationNav(_ref4) { + var _properties$pagesArra, _properties$pagesArra2; + + var properties = _extends$8({}, _ref4); + + return properties.pagesArray.length > 1 && /*#__PURE__*/React.createElement("div", { + className: "sui-pagination-wrap" + }, properties.results && /*#__PURE__*/React.createElement("span", { + className: "sui-pagination-results" + }, properties.elements, " results"), /*#__PURE__*/React.createElement("ul", { + className: "sui-pagination" + }, properties.skip && /*#__PURE__*/React.createElement("li", { + onClick: properties.handleSkipToFirstPage + }, /*#__PURE__*/React.createElement("a", { + disabled: properties.selectedPage <= 1 + }, /*#__PURE__*/React.createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.skipToFirstLabel || 'Go to first page'), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true", + title: properties.skipToFirstLabel || 'Go to first page', + className: "sui-icon-arrow-skip-back" + }))), /*#__PURE__*/React.createElement("li", { + onClick: properties.handlePreviousPage + }, /*#__PURE__*/React.createElement("a", { + disabled: properties.selectedPage <= 1 + }, /*#__PURE__*/React.createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.previousLabel || 'Go to previous page'), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true", + title: properties.previousLabel || 'Go to previous page', + className: "sui-icon-chevron-left" + }))), properties.startIndex > 0 && /*#__PURE__*/React.createElement("li", { + onClick: properties.handlePreviousEllipsis + }, /*#__PURE__*/React.createElement("a", null, "\u2026")), (_properties$pagesArra = properties.pagesArray) === null || _properties$pagesArra === void 0 ? void 0 : (_properties$pagesArra2 = _properties$pagesArra.slice(properties.startIndex, properties.endIndex)) === null || _properties$pagesArra2 === void 0 ? void 0 : _properties$pagesArra2.map(function (data, index) { + return /*#__PURE__*/React.createElement("li", { + onClick: function onClick() { + return properties.handlePageClick(parseInt(data)); + }, + key: index + }, /*#__PURE__*/React.createElement("a", { + "aria-selected": properties.selectedPage === data, + className: properties.selectedPage == data ? 'sui-active' : '' + }, data)); + }), properties.endIndex < properties.pages && /*#__PURE__*/React.createElement("li", { + onClick: properties.handleNextEllipsis + }, /*#__PURE__*/React.createElement("a", null, "\u2026")), /*#__PURE__*/React.createElement("li", { + onClick: properties.handleNextPage + }, /*#__PURE__*/React.createElement("a", { + disabled: properties.selectedPage >= properties.pages + }, /*#__PURE__*/React.createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.nextLabel || 'Go to next page.'), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true", + title: properties.nextLabel || 'Go to next page.', + className: "sui-icon-chevron-right" + }))), properties.skip && /*#__PURE__*/React.createElement("li", { + onClick: properties.handleSkipToLastPage + }, /*#__PURE__*/React.createElement("a", { + disabled: properties.selectedPage >= properties.pages + }, /*#__PURE__*/React.createElement("span", { + "aria-hidden": "false", + className: "sui-screen-reader-text" + }, properties.skipToLastLabel || 'Go to last page.'), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true", + title: properties.skipToLastLabel || 'Go to last page', + className: "sui-icon-arrow-skip-forward" + }))))); +}; + +function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _defineProperties$2(target, props) { +function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; @@ -1797,14 +1962,32 @@ function _defineProperties$2(target, props) { } } -function _createClass$2(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); - if (staticProps) _defineProperties$2(Constructor, staticProps); +function _createClass$1(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); + if (staticProps) _defineProperties$1(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); return Constructor; } -function _extends$4() { - _extends$4 = Object.assign || function (target) { +function _defineProperty$3(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _extends$7() { + _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -1818,10 +2001,10 @@ function _extends$4() { return target; }; - return _extends$4.apply(this, arguments); + return _extends$7.apply(this, arguments); } -function _inherits$2(subClass, superClass) { +function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } @@ -1833,39 +2016,42 @@ function _inherits$2(subClass, superClass) { configurable: true } }); - if (superClass) _setPrototypeOf$2(subClass, superClass); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf$1(subClass, superClass); } -function _getPrototypeOf$2(o) { - _getPrototypeOf$2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { +function _getPrototypeOf$1(o) { + _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; - return _getPrototypeOf$2(o); + return _getPrototypeOf$1(o); } -function _setPrototypeOf$2(o, p) { - _setPrototypeOf$2 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { +function _setPrototypeOf$1(o, p) { + _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; - return _setPrototypeOf$2(o, p); + return _setPrototypeOf$1(o, p); } -function _isNativeReflectConstruct$2() { +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function _assertThisInitialized$2(self) { +function _assertThisInitialized$1(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } @@ -1873,30 +2059,32 @@ function _assertThisInitialized$2(self) { return self; } -function _possibleConstructorReturn$2(self, call) { +function _possibleConstructorReturn$1(self, call) { if (call && (_typeof$1(call) === "object" || typeof call === "function")) { return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); } - return _assertThisInitialized$2(self); + return _assertThisInitialized$1(self); } -function _createSuper$2(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); +function _createSuper$1(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { - var Super = _getPrototypeOf$2(Derived), + var Super = _getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf$2(this).constructor; + var NewTarget = _getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } - return _possibleConstructorReturn$2(this, result); + return _possibleConstructorReturn$1(this, result); }; } @@ -1912,56 +2100,303 @@ function _taggedTemplateLiteral$2(strings, raw) { })); } -function _defineProperty$4(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} +var _templateObject$2, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8; -function ownKeys$3(object, enumerableOnly) { - var keys = Object.keys(object); +var aria = aria || {}; +aria.KeyCode = { + TAB: 9, + RETURN: 13, + ESC: 27, + SPACE: 32, + PAGE_UP: 33, + PAGE_DOWN: 34, + END: 35, + HOME: 36, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + DELETE: 46 +}; +var screen$1 = { + mobile: 480, + tablet: 783, + laptop: 1200, + desktop: 1500 +}; +var device$1 = { + mobile: "(min-width: ".concat(screen$1.mobile, "px)"), + tablet: "(min-width: ".concat(screen$1.tablet, "px)"), + laptop: "(min-width: ".concat(screen$1.laptop, "px)"), + desktop: "(min-width: ".concat(screen$1.desktop, "px)") +}; +var PostWrapper = styled.div.attrs(function (props) { + return { + tabIndex: 0, + props: props + }; +})(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral$2(["\n\t", "\n\tcursor: pointer;\n\t", "\n\t", "\n\tpadding: ", ";\n\tborder-radius: 4px;\n\tbackground-color: #fff;\n\t", "\n\ttransition: 0.2s ease all;\n\n\t* {\n\t\tpointer-events: none;\n\t}\n\n\t&:hover,\n\t&:focus {\n\t\t", "\n\n\t\t", "\n\t}\n\n\t&[disabled] {\n\t\tpointer-events: none;\n\t\topacity: 0.5;\n\t}\n\n\t", "\n\n\t&:focus {\n\t\toutline: none;\n\t\t", "\n\t}\n\n\t@media ", " {\n\t\t", "\n\t}\n"])), function (props) { + return props.banner ? 'overflow: hidden;' : ''; +}, function (props) { + return props.banner ? 'display: flex;' : ''; +}, function (props) { + return props.banner ? 'flex-flow: column nowrap;' : ''; +}, function (props) { + return props.banner ? '20px 20px 30px' : '10px'; +}, function (props) { + return props.banner ? 'box-shadow: 0 0 0 1px #E6E6E6;' : ''; +}, function (props) { + return props.banner ? 'transform: scale(1.02);' : 'background-color: #FAFAFA;'; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t\ttransform: scale(1.05);\n\t\t\t}") : ''; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\tbox-shadow: 0 2px 7px 0 rgba(0,0,0,0.05);\n\t\t}") : ''; +}, function (props) { + return props.banner ? 'box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;' : ''; +}, device$1.tablet, function (props) { + return props.banner ? 'min-height: 100%;' : 'padding: 15px;'; +}); +var PostHeader = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral$2(["\n\tdisplay: flex;\n\tflex-flow: row wrap;\n\n\t+ div {\n\t\tmargin-top: 20px;\n\t}\n"]))); +var PostFooter = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral$2(["\n\tdisplay: flex;\n\tflex: 0 0 auto;\n\tflex-flow: row wrap;\n\talign-items: center;\n\tmargin-top: 15px;\n"]))); +var FeaturedImage = styled.div.attrs(function () { + return { + tabIndex: '-1', + 'aria-hidden': true + }; +})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral$2(["\n\t", "\n\theight: ", ";\n\tmargin: ", ";\n\t", "\n\tdisplay: block;\n\t", "\n\tbackground-color: #FFF;\n\tbackground-image: ", ";\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n"])), function (props) { + return props.banner ? '' : 'width: 66px;'; +}, function (props) { + return props.banner ? '140px' : '54px'; +}, function (props) { + return props.banner ? '-20px -20px 20px' : '0 10px 0 0'; +}, function (props) { + return props.banner ? '' : 'border-radius: 4px;'; +}, function (props) { + return props.banner ? 'flex: 0 0 auto;' : ''; +}, function (props) { + return props.src ? "url(".concat(props.src, ")") : 'none'; +}); +var PostTitle = styled.h3(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral$2(["\n\toverflow: hidden;\n\tdisplay: -webkit-box !important;\n\t-webkit-box-orient: vertical;\n\t", "\n\tmargin: ", " !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px;\n\t", "\n\n\t", "\n"])), function (props) { + return props.banner ? 'flex: 1 1 auto;' : ''; +}, function (props) { + return props.banner ? '0 0 10px' : '0'; +}, function (props) { + return props.banner ? '' : '-webkit-line-clamp: 2;'; +}, function (props) { + return props.banner ? "@media ".concat(device$1.tablet, " {\n\t\t\t-webkit-line-clamp: 2;\n\t\t}") : ''; +}); +var PostTime = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral$2(["\n\t", "\n\tmargin: 0 !important;\n\tpadding: 0 !important;\n\tborder: 0;\n\tcolor: #888 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tletter-spacing: -0.2px;\n\n\t", "\n"])), function (props) { + return props.banner ? 'flex: 0 0 auto;' : ''; +}, function (props) { + return props.banner ? "* + & {\n\t\t\tmargin-left: 5px !important;\n\t\t}" : ''; +}); +var Excerpt = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral$2(["\n\tdisplay: block;\n\t", "\n\n\tp {\n\t\toverflow: hidden;\n\t\tdisplay: -webkit-box;\n\t\t-webkit-box-orient: vertical;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\tborder: 0;\n\t\tcolor: #888 !important;\n\t\tfont-size: 13px !important;\n\t\tline-height: 22px !important;\n\t\tletter-spacing: -0.2px;\n\t\t-webkit-line-clamp: ", ";\n\t}\n"])), function (props) { + return props.banner ? 'flex: 1 1 auto;' : ''; +}, function (props) { + return props.banner ? '3' : '2'; +}); +var ReadMore = styled.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral$2(["\n\tmin-width: 1px;\n\tflex: 1;\n\t", "\n\tcolor: #17A8E3 !important;\n\tfont-size: 13px !important;\n\tline-height: 18px !important;\n\tfont-weight: 500 !important;\n\tletter-spacing: -0.2px !important;\n"])), function (props) { + return props.banner ? 'margin-bottom: 0 !important;' : 'margin: 4px 0 0;'; +}); - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; +var Post = /*#__PURE__*/function (_Component) { + _inherits$1(Post, _Component); + + var _super = _createSuper$1(Post); + + function Post(props) { + var _this; + + _classCallCheck$1(this, Post); + + _this = _super.call(this, props); + + _defineProperty$3(_assertThisInitialized$1(_this), "openLink", function (e) { + var ref = e.target !== null ? e.target : e.srcElement; + + if (ref) { + window.open(ref.getAttribute('data-href'), '_blank'); + } + }); + + _defineProperty$3(_assertThisInitialized$1(_this), "handleKeydown", function (e) { + var key = e.which || e.keyCode; + + switch (key) { + case aria.KeyCode.RETURN: + _this.openLink(e); + + break; + } }); - keys.push.apply(keys, symbols); + + _this.state = { + media: [], + error: null, + isLoaded: false + }; + _this.openLink = _this.openLink.bind(_assertThisInitialized$1(_this)); + _this.handleKeydown = _this.handleKeydown.bind(_assertThisInitialized$1(_this)); + return _this; } - return keys; -} + _createClass$1(Post, [{ + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; -function _objectSpread2$3(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; + var API_URL = 'https://wpmudev.com/blog/wp-json/wp/v2/media/'; + var QUERY_ID = this.props.media; // GET media using fetch. - if (i % 2) { - ownKeys$3(Object(source), true).forEach(function (key) { - _defineProperty$4(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$3(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + if (QUERY_ID) { + fetch(API_URL + QUERY_ID).then(function (response) { + return response.json(); + }).then(function (data) { + var _data$data; + + if (((_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.status) === 404) { + _this2.setState({ + isLoaded: true, + error: data.data.message + }); + } else { + _this2.setState({ + isLoaded: true, + media: data.guid.rendered + }); + } + }, function (error) { + _this2.setState({ + isLoaded: true, + error: error + }); + }); + } + } + }, { + key: "render", + value: function render() { + var _this$state = this.state, + media = _this$state.media, + error = _this$state.error, + isLoaded = _this$state.isLoaded; + var translate = this.props.translate; + var read_article = translate && translate[0].read_article ? translate[0].read_article : 'Read article'; + var min_read = translate && translate[0].min_read ? translate[0].min_read : 'min read'; // replace html entities from the title with character. + + var postTitle = this.props.title.replace(/&#(\d+);/g, function (match, dec) { + return String.fromCharCode(dec); }); + var PostImage = ''; // Empty. + + var image = this.props.image; + + if (image) { + PostImage = /*#__PURE__*/React.createElement(FeaturedImage, _extends$7({ + src: image, + alt: "" + }, this.props, { + title: postTitle + })); + } else { + if (error) { + PostImage = error.message; + } else if ((typeof image === 'undefined' || image === null || image === '') && !this.props.media || error) { + PostImage = /*#__PURE__*/React.createElement("span", { + style: { + marginTop: '10px' + } + }); + } else if (!isLoaded) { + PostImage = /*#__PURE__*/React.createElement("p", { + style: { + textAlign: 'center' + } + }, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, "Image is loading")); + } else { + PostImage = /*#__PURE__*/React.createElement(FeaturedImage, _extends$7({ + src: media + }, this.props, { + title: postTitle + })); + } + } + + if (this.props.banner) { + return /*#__PURE__*/React.createElement(PostWrapper, _extends$7({}, this.props, { + title: postTitle + }), PostImage, this.props.title && '' !== this.props.title && /*#__PURE__*/React.createElement(PostTitle, { + banner: true, + dangerouslySetInnerHTML: { + __html: this.props.title + } + }), this.props.excerpt && '' !== this.props.excerpt && /*#__PURE__*/React.createElement(Excerpt, { + banner: true, + dangerouslySetInnerHTML: { + __html: this.props.excerpt + } + }), /*#__PURE__*/React.createElement(PostFooter, { + banner: true + }, /*#__PURE__*/React.createElement(ReadMore, { + banner: true + }, read_article), this.props.time && '' !== this.props.time && /*#__PURE__*/React.createElement(PostTime, { + banner: true + }, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-clock sui-sm", + style: { + verticalAlign: 'middle', + marginRight: 5 + }, + "aria-hidden": "true" + }), this.props.time, " ", min_read))); + } + + return /*#__PURE__*/React.createElement(PostWrapper, _extends$7({}, this.props, { + title: postTitle + }), /*#__PURE__*/React.createElement(PostHeader, null, PostImage, /*#__PURE__*/React.createElement("div", { + style: { + minWidth: '1px', + flex: 1 + } + }, this.props.title && '' !== this.props.title && /*#__PURE__*/React.createElement(PostTitle, { + dangerouslySetInnerHTML: { + __html: this.props.title + } + }), this.props.time && '' !== this.props.time && /*#__PURE__*/React.createElement(PostTime, null, "*", this.props.time, " ", min_read))), this.props.excerpt && '' !== this.props.excerpt && /*#__PURE__*/React.createElement(Excerpt, { + dangerouslySetInnerHTML: { + __html: this.props.excerpt + } + }), /*#__PURE__*/React.createElement(ReadMore, null, read_article)); } - } + }]); - return target; + return Post; +}(Component); + +function _extends$6() { + _extends$6 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$6.apply(this, arguments); } -function _objectWithoutPropertiesLoose$6(source, excluded) { +function _objectWithoutPropertiesLoose$1$1(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -1976,10 +2411,10 @@ function _objectWithoutPropertiesLoose$6(source, excluded) { return target; } -function _objectWithoutProperties$6(source, excluded) { +function _objectWithoutProperties$1$1(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$6(source, excluded); + var target = _objectWithoutPropertiesLoose$1$1(source, excluded); var key, i; @@ -1997,261 +2432,211 @@ function _objectWithoutProperties$6(source, excluded) { return target; } -var ButtonIcon$2 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$6(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); - - var loader = /*#__PURE__*/React.createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, - "aria-hidden": "true" - }); - var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), - "aria-hidden": "true" - }), /*#__PURE__*/React.createElement("span", { - className: "sui-screen-reader-text" - }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. - - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; - - case "gray": - default: - className += ""; - break; - } // Set button style. - - - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; +function ownKeys$2(object, enumerableOnly) { + var keys = Object.keys(object); - case "solid": - default: - className += ""; - break; - } // Set loading class. + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + return keys; +} - if (loading) { - className += " sui-button-onload"; +function _objectSpread2$2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { + _defineProperty$2(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$3({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; - -function _templateObject2$2() { - var data = _taggedTemplateLiteral$2(["\n.sui-wrap && {\n ", "\n ", "\n ", "\n ", "\n ", "\n\n [class*=\"sui-icon-\"]:before {\n color: inherit !important;\n }\n\n &:hover,\n &:focus {\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n}\n"]); + return target; +} - _templateObject2$2 = function _templateObject2() { - return data; - }; +function _defineProperty$2(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - return data; + return obj; } -function _templateObject$2() { - var data = _taggedTemplateLiteral$2(["\n.sui-wrap && {\n ", "\n ", "\n ", "\n ", "\n ", "\n\n [class*=\"sui-icon-\"]:before {\n color: inherit !important;\n }\n\n &:hover,\n &:focus {\n ", "\n ", "\n ", "\n ", "\n ", "\n }\n}\n"]); +function _objectWithoutPropertiesLoose$7(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - _templateObject$2 = function _templateObject() { - return data; - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - return data; + return target; } -var Link = styled.a(_templateObject$2(), function (props) { - return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; -}, function (props) { - return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; -}); -var Button$1 = styled.button(_templateObject2$2(), function (props) { - return 'blue' === props.color ? 'color: #17A8E3 !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'color: #1ABC9C !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'color: #FECF2F !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'color: #FF6D6D !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'color: #8D00B1 !important;' : ''; -}, function (props) { - return 'blue' === props.color ? 'background-color: #E1F6FF !important;' : ''; -}, function (props) { - return 'green' === props.color ? 'background-color: #D1F1EA !important;' : ''; -}, function (props) { - return 'yellow' === props.color ? 'background-color: #FFF5D5 !important;' : ''; -}, function (props) { - return 'red' === props.color ? 'background-color: #FFE5E9 !important;' : ''; -}, function (props) { - return 'purple' === props.color ? 'background-color: #F9E1FF !important;' : ''; -}); - -var Dropdown = /*#__PURE__*/function (_Component) { - _inherits$2(Dropdown, _Component); +function _objectWithoutProperties$7(source, excluded) { + if (source == null) return {}; - var _super = _createSuper$2(Dropdown); + var target = _objectWithoutPropertiesLoose$7(source, excluded); - function Dropdown(props) { - var _this; + var key, i; - _classCallCheck$2(this, Dropdown); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - _this = _super.call(this, props); - _this.state = { - open: false - }; - _this.toggle = _this.toggle.bind(_assertThisInitialized$2(_this)); - _this.wrapperRef = /*#__PURE__*/React.createRef(); - _this.setWrapperRef = _this.setWrapperRef.bind(_assertThisInitialized$2(_this)); - _this.handleClickOutside = _this.handleClickOutside.bind(_assertThisInitialized$2(_this)); - return _this; + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } } - _createClass$2(Dropdown, [{ - key: "toggle", - value: function toggle() { - this.setState({ - open: !this.state.open - }); - } - }, { - key: "setWrapperRef", - value: function setWrapperRef(node) { - this.wrapperRef = node; - } - }, { - key: "handleClickOutside", - value: function handleClickOutside(e) { - if (this.wrapperRef && !this.wrapperRef.contains(e.target)) { - this.setState({ - open: false - }); - } - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - document.addEventListener('mousedown', this.handleClickOutside); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - document.removeEventListener('mousedown', this.handleClickOutside); - } - }, { - key: "render", - value: function render() { - var _this2 = this; + return target; +} - var open = this.state.open; - var options = Children.map(this.props.children, function (option) { - var icon = option.props.icon && '' !== option.props.icon && /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(option.props.icon), - "aria-hidden": "true" - }); - var tag = option.props.tag && '' !== option.props.tag && /*#__PURE__*/React.createElement("span", { - className: "sui-tag sui-tag-beta", - style: { - pointerEvents: 'none', - display: 'inline', - marginLeft: 5, - lineHeight: 1 - } - }, option.props.tag); - var label = /*#__PURE__*/React.createElement(Fragment, null, icon, option.props.name, tag); +var _excluded$1$1 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; - if (option.props.href) { - return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Link, _extends$4({ - href: option.props.href - }, option.props), label)); - } +var ButtonIcon$1 = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$7(_ref, _excluded$1$1); - return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Button$1, option.props, label)); - }); - var clazz = !open ? 'sui-dropdown' : 'sui-dropdown open'; + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. - switch (this.props.position) { - case 'left': - clazz += ' sui-dropdown-right'; - break; + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; - case 'center': - clazz += ' sui-dropdown-center'; - break; + case 'gray': + default: + className += ''; + break; + } // Set button style. - case 'right': - clazz += ' sui-dropdown-left'; - break; - default: - clazz += ' sui-dropdown-right'; - break; - } + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; - return /*#__PURE__*/React.createElement("div", { - className: clazz, - ref: this.setWrapperRef, - onClick: function onClick(e) { - return e.stopPropagation(); - } - }, /*#__PURE__*/React.createElement(ButtonIcon$2, { - icon: "widget-settings-config", - label: open ? 'Open menu' : 'Close menu', - onClick: this.toggle - }), open && /*#__PURE__*/React.createElement("ul", { - onClick: function onClick() { - return _this2.setState({ - open: false - }); - } - }, options)); - } - }]); + case 'solid': + default: + className += ''; + break; + } // Set loading class. - return Dropdown; -}(Component); + + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$2({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); +}; + +var _excluded$7 = ["classes", "now", "hasLoader", "hasLabel", "hasCancel", "hasFrame", "hasLegend", "sourceLang", "cbFunction"]; + +var ProgressBar = function ProgressBar(_ref) { + var classes = _ref.classes, + now = _ref.now, + _ref$hasLoader = _ref.hasLoader, + hasLoader = _ref$hasLoader === void 0 ? true : _ref$hasLoader, + _ref$hasLabel = _ref.hasLabel, + hasLabel = _ref$hasLabel === void 0 ? true : _ref$hasLabel, + _ref$hasCancel = _ref.hasCancel, + hasCancel = _ref$hasCancel === void 0 ? true : _ref$hasCancel, + _ref$hasFrame = _ref.hasFrame, + hasFrame = _ref$hasFrame === void 0 ? false : _ref$hasFrame, + _ref$hasLegend = _ref.hasLegend, + hasLegend = _ref$hasLegend === void 0 ? true : _ref$hasLegend, + sourceLang = _ref.sourceLang, + _ref$cbFunction = _ref.cbFunction, + cbFunction = _ref$cbFunction === void 0 ? function () {} : _ref$cbFunction, + props = _objectWithoutProperties$1$1(_ref, _excluded$7); + + var extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; + var currValue = Number(now); + var value = currValue && currValue > 0 ? currValue > 100 ? 100 : currValue : 0; + var lang = Object.assign({ + cancel: 'Cancel', + legend: 'Status...' + }, sourceLang); + var loaderMarkup = hasLoader && /*#__PURE__*/React.createElement("span", { + className: "sui-progress-icon" + }, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading" + })); + var loaderText = hasLabel && /*#__PURE__*/React.createElement("span", { + className: "sui-progress-text" + }, value, "%"); + var loaderBar = /*#__PURE__*/React.createElement("div", { + className: "sui-progress-bar" + }, /*#__PURE__*/React.createElement("span", { + style: { + width: "".concat(value, "%") + } + })); + var innerMarkup = /*#__PURE__*/React.createElement("div", _extends$6({ + className: "sui-progress".concat(extraClasses) + }, props), loaderMarkup, loaderText, loaderBar, hasCancel && /*#__PURE__*/React.createElement(ButtonIcon$1, { + icon: "close", + iconSize: "sm", + label: lang.cancel, + onClick: function onClick() { + return cbFunction(); + } + })); + return /*#__PURE__*/React.createElement(React.Fragment, null, hasFrame && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { + className: "sui-progress-block" + }, innerMarkup), hasLegend && /*#__PURE__*/React.createElement("div", { + className: "sui-progress-state" + }, /*#__PURE__*/React.createElement("span", null, lang.legend))), !hasFrame && innerMarkup); +}; function _extends$5() { _extends$5 = Object.assign || function (target) { @@ -2271,7 +2656,7 @@ function _extends$5() { return _extends$5.apply(this, arguments); } -function _objectWithoutPropertiesLoose$7(source, excluded) { +function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2286,10 +2671,10 @@ function _objectWithoutPropertiesLoose$7(source, excluded) { return target; } -function _objectWithoutProperties$7(source, excluded) { +function _objectWithoutProperties$6(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$7(source, excluded); + var target = _objectWithoutPropertiesLoose$6(source, excluded); var key, i; @@ -2307,35 +2692,26 @@ function _objectWithoutProperties$7(source, excluded) { return target; } -function _taggedTemplateLiteral$3(strings, raw) { - if (!raw) { - raw = strings.slice(0); - } - - return Object.freeze(Object.defineProperties(strings, { - raw: { - value: Object.freeze(raw) - } - })); +function _slicedToArray$2(arr, i) { + return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2(); } -function _slicedToArray$1(arr, i) { - return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); -} - -function _arrayWithHoles$1(arr) { +function _arrayWithHoles$2(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArrayLimit$1(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; +function _iterableToArrayLimit$2(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -2354,16 +2730,16 @@ function _iterableToArrayLimit$1(arr, i) { return _arr; } -function _unsupportedIterableToArray$1(o, minLen) { +function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); } -function _arrayLikeToArray$1(arr, len) { +function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -2373,60 +2749,124 @@ function _arrayLikeToArray$1(arr, len) { return arr2; } -function _nonIterableRest$1() { +function _nonIterableRest$2() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _defineProperty$5(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } +var _excluded$6 = ["id", "label", "hideLabel", "description", "hideDescription", "checked", "disabled", "children", "cbFunction"]; - return obj; -} +var Toggle = function Toggle(_ref) { + var id = _ref.id, + label = _ref.label, + hideLabel = _ref.hideLabel, + description = _ref.description, + hideDescription = _ref.hideDescription, + checked = _ref.checked, + disabled = _ref.disabled, + children = _ref.children, + _ref$cbFunction = _ref.cbFunction, + cbFunction = _ref$cbFunction === void 0 ? function (e) {} : _ref$cbFunction, + args = _objectWithoutProperties$6(_ref, _excluded$6); + + var _useState = useState(checked), + _useState2 = _slicedToArray$2(_useState, 2), + state = _useState2[0], + setState = _useState2[1]; -function ownKeys$4(object, enumerableOnly) { - var keys = Object.keys(object); + var initialState = function initialState() { + if (!isUndefined(checked, 'boolean')) { + setState(checked); + } + }; - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } + var changeState = function changeState(e) { + setState(e.target.checked); + cbFunction(e); + }; // Set initial state. - return keys; -} -function _objectSpread2$4(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; + useEffect(function () { + return initialState; + }, []); + var hasLabel = !isUndefined(label) ? true : false; + var hasDescription = !isUndefined(description) ? true : false; + var hasContent = !isUndefined(children) ? true : false; + return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("label", { + htmlFor: id, + className: "sui-toggle" + }, /*#__PURE__*/React.createElement("input", _extends$5({ + type: "checkbox", + id: id + }, hasLabel && { + 'aria-labelledby': id + '--label' + }, hasDescription && { + 'aria-describedby': id + '--description' + }, hasContent && { + 'aria-controls': id + '--content' + }, true === disabled && { + disabled: true + }, { + defaultChecked: state, + onClick: function onClick(e) { + return changeState(e); + } + }, args)), /*#__PURE__*/React.createElement("span", { + className: "sui-toggle-slider", + "aria-hidden": "true" + }), hasLabel && /*#__PURE__*/React.createElement("span", { + id: "".concat(id, "--label"), + className: "sui-toggle-label".concat(!isUndefined(hideLabel) ? ' sui-screen-reader-text' : '') + }, label), hasDescription && /*#__PURE__*/React.createElement("span", { + id: "".concat(id, "--description"), + className: "sui-description".concat(true === hideDescription ? ' sui-screen-reader-text' : '') + }, description)), hasContent && state && /*#__PURE__*/React.createElement("div", { + tabIndex: 0, + id: "".concat(id, "--content"), + className: "sui-toggle-content" + }, children)); +}; // Check if element is undefined. - if (i % 2) { - ownKeys$4(Object(source), true).forEach(function (key) { - _defineProperty$5(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); + +var isUndefined = function isUndefined(element, type) { + var isValid = 'undefined' !== typeof element; + var isNotEmpty = '' !== element; + + if (element && isValid && isNotEmpty) { + if (type === 'number') { + if (!Number.isNaN(element)) { + return false; + } + } else if (type === 'boolean') { + if ('boolean' === typeof element) { + return false; + } } else { - ownKeys$4(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); + return false; } } - return target; + return true; +}; + +function _extends$4() { + _extends$4 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$4.apply(this, arguments); } -function _objectWithoutPropertiesLoose$1$1(source, excluded) { +function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2441,10 +2881,10 @@ function _objectWithoutPropertiesLoose$1$1(source, excluded) { return target; } -function _objectWithoutProperties$1$1(source, excluded) { +function _objectWithoutProperties$5(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$1$1(source, excluded); + var target = _objectWithoutPropertiesLoose$5(source, excluded); var key, i; @@ -2462,246 +2902,390 @@ function _objectWithoutProperties$1$1(source, excluded) { return target; } -var ButtonIcon$3 = function ButtonIcon(_ref) { - var label = _ref.label, - icon = _ref.icon, - iconSize = _ref.iconSize, - _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, - color = _ref.color, - className = _ref.className, - loading = _ref.loading, - props = _objectWithoutProperties$1$1(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); +var _excluded$5 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"], + _excluded2$2 = ["type", "options"]; - var loader = /*#__PURE__*/React.createElement("span", { - className: "sui-icon-loader sui-loading", - style: { - position: "relative" - }, +var RadioCheckboxInput$1 = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties$5(_ref, _excluded$5); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React.createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React.createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React.createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React.createElement("input", _extends$4({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React.createElement("span", { "aria-hidden": "true" - }); - var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React.createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React.createElement("input", _extends$4({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React.createElement("span", { "aria-hidden": "true" - }), /*#__PURE__*/React.createElement("span", { - className: "sui-screen-reader-text" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId }, label)); - className = "sui-button-icon ".concat(className || ''); // Set button color. +}; - switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; - break; +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var type = _ref2.type, + options = _ref2.options, + props = _objectWithoutProperties$5(_ref2, _excluded2$2); - case "gray": - default: - className += ""; - break; - } // Set button style. + return /*#__PURE__*/React.createElement("div", { + className: "sui-form-field", + role: 'radio' === type ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React.createElement(RadioCheckboxInput$1, _extends$4({ + key: index, + type: type, + label: option.label, + labelId: option.labelId, + id: option.id, + name: option.name, + image: option.image, + checked: option.defaultChecked, + disabled: option.disabled + }, props)) : /*#__PURE__*/React.createElement(RadioCheckboxInput$1, _extends$4({ + key: index, + type: type, + label: option.label, + labelId: option.labelId, + id: option.id, + name: option.name, + checked: option.defaultChecked, + disabled: option.disabled + }, props)); + })); +}; +function _extends$3() { + _extends$3 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; - break; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } - case "solid": - default: - className += ""; - break; - } // Set loading class. + return target; + }; + return _extends$3.apply(this, arguments); +} - if (loading) { - className += " sui-button-onload"; +function _objectWithoutPropertiesLoose$4(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; } - var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$4({ - className: className, - disabled: props.disabled || loading - }, props), loading ? loader : content); -}; + return target; +} + +function _objectWithoutProperties$4(source, excluded) { + if (source == null) return {}; -function _templateObject$3() { - var data = _taggedTemplateLiteral$3(["\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 10px;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n"]); + var target = _objectWithoutPropertiesLoose$4(source, excluded); - _templateObject$3 = function _templateObject() { - return data; - }; + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - return data; + return target; } -var ItemImage = styled.span(_templateObject$3()); +function _taggedTemplateLiteral$1(strings, raw) { + if (!raw) { + raw = strings.slice(0); + } -var useToggle = function useToggle() { - var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); +} - var _useState = useState(initialValue), - _useState2 = _slicedToArray$1(_useState, 2), - value = _useState2[0], - setValue = _useState2[1]; +var _templateObject$1, _templateObject2, _templateObject3; - var toggle = useCallback(function () { - setValue(function (v) { - return !v; - }); - }, []); - return [value, toggle]; +var _excluded$4 = ["children", "className"], + _excluded2$1 = ["icon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"], + _excluded3$1 = ["title", "titleIcon", "tagLabel", "tagColor", "tagSize", "tagDesign", "className", "children"], + _excluded4$1 = ["className", "children"], + _excluded5 = ["className", "children"]; +var utils = { + gutter: 30, + gutter_md: 20 +}; +var screen = { + mobile: 480, + tablet: 783, + laptop: 1200, + desktop: 1500 +}; +var device = { + mobile: "(min-width: ".concat(screen.mobile, "px)"), + tablet: "(min-width: ".concat(screen.tablet, "px)"), + laptop: "(min-width: ".concat(screen.laptop, "px)"), + desktop: "(min-width: ".concat(screen.desktop, "px)") }; -var Accordion = function Accordion(_ref) { +var Box = function Box(_ref) { var children = _ref.children, - props = _objectWithoutProperties$7(_ref, ["children"]); + className = _ref.className, + props = _objectWithoutProperties$4(_ref, _excluded$4); - return /*#__PURE__*/React.createElement("div", _extends$5({ - className: "sui-accordion" + return /*#__PURE__*/React.createElement("div", _extends$3({ + className: 'undefined' !== typeof className && '' !== className ? "sui-box ".concat(className) : 'sui-box' }, props), children); }; -var AccordionItem = function AccordionItem(_ref2) { - var title = _ref2.title, - titleSize = _ref2.titleSize, - icon = _ref2.icon, - image = _ref2.image, +var BoxTitle = function BoxTitle(_ref2) { + var icon = _ref2.icon, + tagLabel = _ref2.tagLabel, + tagColor = _ref2.tagColor, + tagSize = _ref2.tagSize, + tagDesign = _ref2.tagDesign, + className = _ref2.className, children = _ref2.children, - props = _objectWithoutProperties$7(_ref2, ["title", "titleSize", "icon", "image", "children"]); + props = _objectWithoutProperties$4(_ref2, _excluded2$1); - var _useToggle = useToggle(), - _useToggle2 = _slicedToArray$1(_useToggle, 2), - isOpen = _useToggle2[0], - setIsOpen = _useToggle2[1]; + var tagClass = 'sui-tag'; - return /*#__PURE__*/React.createElement("div", _extends$5({ - className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') - }, props), /*#__PURE__*/React.createElement(AccordionItemHeader, { - state: isOpen ? 'true' : 'false', - title: title, - titleSize: titleSize, - icon: icon, - image: image, - onClick: setIsOpen - }), /*#__PURE__*/React.createElement(AccordionItemBody, null, children)); -}; + switch (tagColor) { + case 'red': + case 'yellow': + case 'green': + case 'blue': + case 'purple': + tagClass += ' sui-tag-' + tagColor; + break; + } -var AccordionItemHeader = function AccordionItemHeader(_ref3) { - var title = _ref3.title, - titleSize = _ref3.titleSize, - icon = _ref3.icon, - image = _ref3.image, - children = _ref3.children, - props = _objectWithoutProperties$7(_ref3, ["title", "titleSize", "icon", "image", "children"]); + switch (tagSize) { + case 'sm': + case 'small': + tagClass += ' sui-tag-sm'; + break; + } - var _useState3 = useState(false), - _useState4 = _slicedToArray$1(_useState3, 1), - isOpen = _useState4[0]; + switch (tagDesign) { + case 'outlined': + tagClass += ' sui-tag-ghost'; + break; + } - var countChildren = React.Children.toArray(children).length; - var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React.createElement("span", { - className: "sui-icon-".concat(icon), + return /*#__PURE__*/React.createElement("h3", _extends$3({ + className: 'undefined' !== typeof className && '' !== className ? "sui-box-title ".concat(className) : 'sui-box-title' + }, props), icon && '' !== icon && /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon, " sui-md"), "aria-hidden": "true" - }) : ''; - var titleColumnImage = 'undefined' !== typeof image && '' !== icon ? /*#__PURE__*/React.createElement(ItemImage, { + }), children, tagLabel && '' !== tagLabel && /*#__PURE__*/React.createElement("span", { + className: tagClass, style: { - backgroundImage: "url(".concat(image, ")") + marginLeft: 10 } - }) : ''; - var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; - var titleColumn = /*#__PURE__*/React.createElement("div", { - className: "sui-accordion-item-title".concat(titleColumnSize) - }, titleColumnIcon, titleColumnImage, title); - var indicator = /*#__PURE__*/React.createElement(ButtonIcon$3, { - icon: "chevron-down", - label: isOpen ? 'Close section' : 'Open section', - className: "sui-button-icon sui-accordion-open-indicator" - }); - var columns = React.Children.map(children, function (column, index) { - index++; - var columnSize = column.props.size; - var columnClass = 'undefined' !== typeof columnSize && '' !== columnSize ? 'sui-accordion-col-' + columnSize : 'sui-accordion-col-auto'; - var columnContent = column.props.children; - return /*#__PURE__*/React.createElement("div", { - className: columnClass - }, columnContent, countChildren === index && indicator); - }); - var actions = /*#__PURE__*/React.createElement("div", { - className: "sui-accordion-col-auto" - }, indicator); - return /*#__PURE__*/React.createElement("div", _extends$5({ - className: "sui-accordion-item-header" - }, props), titleColumn, countChildren > 0 ? columns : actions); + }, tagLabel)); }; -var AccordionItemBody = function AccordionItemBody(_ref4) { - var children = _ref4.children, - props = _objectWithoutProperties$7(_ref4, ["children"]); +var Header = styled.div.attrs(function (props) { + return { + props: props + }; +})(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tdisplay: ", ";\n\t\t", "\n\t\t", "\n\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-bottom-width: ", "px;\n\t\t", "\n\n\t\t", "\n\t", "\n\n\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return 'block' !== props.display ? 'flex' : 'block'; +}, function (props) { + return 'block' !== props.display && 'flex-flow: row wrap;'; +}, function (props) { + return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; +}, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md / 2; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md / 2; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.border || 0 === props.border ? props.border : 1; +}, function (props) { + return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; +}, function (props) { + return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; +}, function (props) { + return 'block' !== props.display && '> * + * { margin-left: 10px; }'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter / 2; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter / 2; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); - return /*#__PURE__*/React.createElement("div", _extends$5({ - className: "sui-accordion-item-body" - }, props), children); -}; +var BoxHeader = function BoxHeader(_ref3) { + var title = _ref3.title, + titleIcon = _ref3.titleIcon, + tagLabel = _ref3.tagLabel, + tagColor = _ref3.tagColor, + tagSize = _ref3.tagSize, + tagDesign = _ref3.tagDesign; + _ref3.className; -function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } + var children = _ref3.children, + props = _objectWithoutProperties$4(_ref3, _excluded3$1); - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } -} + return /*#__PURE__*/React.createElement(Header, props, title && '' !== title && /*#__PURE__*/React.createElement(BoxTitle, { + icon: titleIcon, + tagLabel: tagLabel, + tagColor: tagColor, + tagSize: tagSize, + tagDesign: tagDesign + }, title), children); +}; -function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); +var Body = styled.div.attrs(function (props) { + return { + props: props + }; +})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-top-width: ", "px;\n\t\tborder-bottom-width: ", "px;\n\t\ttext-align: ", ";\n\n\t\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.borderTop || 0 === props.borderTop ? props.borderTop : 0; +}, function (props) { + return props.borderBottom || 0 === props.borderBottom ? props.borderBottom : 0; +}, function (props) { + return props.alignment || 'left'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } +var BoxBody = function BoxBody(_ref4) { + var className = _ref4.className, + children = _ref4.children, + props = _objectWithoutProperties$4(_ref4, _excluded4$1); - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } + return /*#__PURE__*/React.createElement(Body, _extends$3({ + className: className + }, props), children); +}; - _next(undefined); - }); +var Footer = styled.div.attrs(function (props) { + return { + props: props }; -} +})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral$1(["\n\t.sui-wrap && {\n\t\tdisplay: ", ";\n\t\t", "\n\t\t", "\n\tmargin: 0;\n\t\tpadding-top: ", "px;\n\t\tpadding-right: ", "px;\n\t\tpadding-bottom: ", "px;\n\t\tpadding-left: ", "px;\n\t\tborder: 0 solid #e6e6e6;\n\t\tborder-top-width: ", "px;\n\t\t", "\n\n\t\t", "\n\t", "\n\n\t@media ", " {\n\t\t\tpadding-top: ", "px;\n\t\t\tpadding-right: ", "px;\n\t\t\tpadding-bottom: ", "px;\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t}\n"])), function (props) { + return 'block' !== props.display ? 'flex' : 'block'; +}, function (props) { + return 'block' !== props.display && 'flex-flow: row wrap;'; +}, function (props) { + return 'block' !== props.display && ('left' === props.alignment || 'right' === props.alignment || 'center' === props.alignment) ? 'left' === props.alignment ? 'justify-content: flex-start;' : 'right' === props.alignment ? 'justify-content: flex-end;' : 'justify-content: center;' : 'justify-content: space-between;'; +}, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop > 29 ? props.paddingTop - 10 : props.paddingTop : utils.gutter_md; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight > 29 ? props.paddingRight - 10 : props.paddingRight : utils.gutter_md; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom > 29 ? props.paddingBottom - 10 : props.paddingBottom : utils.gutter_md; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft > 29 ? props.paddingLeft - 10 : props.paddingLeft : utils.gutter_md; +}, function (props) { + return props.border || 0 === props.border || '' === props.border ? props.border : 1; +}, function (props) { + return 'block' === props.display && ('right' === props.alignment || 'center' === props.alignment) && 'text-align: ' + props.alignment + ';'; +}, function (props) { + return 'block' !== props.display && '> * { max-width: 100%; flex: 0 0 auto; }'; +}, function (props) { + return 'block' !== props.display && '> * + * { margin-left: 10px; }'; +}, device.tablet, function (props) { + return props.paddingTop || 0 === props.paddingTop ? props.paddingTop : utils.gutter; +}, function (props) { + return props.paddingRight || 0 === props.paddingRight ? props.paddingRight : utils.gutter; +}, function (props) { + return props.paddingBottom || 0 === props.paddingBottom ? props.paddingBottom : utils.gutter; +}, function (props) { + return props.paddingLeft || 0 === props.paddingLeft ? props.paddingLeft : utils.gutter; +}); -function _defineProperty$6(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } +var BoxFooter = function BoxFooter(_ref5) { + var className = _ref5.className, + children = _ref5.children, + props = _objectWithoutProperties$4(_ref5, _excluded5); - return obj; -} + return /*#__PURE__*/React.createElement(Footer, _extends$3({ + className: className + }, props), children); +}; -function _extends$6() { - _extends$6 = Object.assign || function (target) { +function _extends$1() { + _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -2715,44 +3299,10 @@ function _extends$6() { return target; }; - return _extends$6.apply(this, arguments); -} - -function ownKeys$5(object, enumerableOnly) { - var keys = Object.keys(object); - - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); - } - - return keys; -} - -function _objectSpread2$5(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys$5(Object(source), true).forEach(function (key) { - _defineProperty$6(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys$5(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } - } - - return target; + return _extends$1.apply(this, arguments); } -function _objectWithoutPropertiesLoose$8(source, excluded) { +function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -2767,10 +3317,10 @@ function _objectWithoutPropertiesLoose$8(source, excluded) { return target; } -function _objectWithoutProperties$8(source, excluded) { +function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose$8(source, excluded); + var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; @@ -2788,35 +3338,38 @@ function _objectWithoutProperties$8(source, excluded) { return target; } -function _slicedToArray$2(arr, i) { - return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2(); -} +function _taggedTemplateLiteral(strings, raw) { + if (!raw) { + raw = strings.slice(0); + } -function _toConsumableArray(arr) { - return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableSpread(); + return Object.freeze(Object.defineProperties(strings, { + raw: { + value: Object.freeze(raw) + } + })); } -function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return _arrayLikeToArray$2(arr); +function _slicedToArray$1(arr, i) { + return _arrayWithHoles$1(arr) || _iterableToArrayLimit$1(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest$1(); } -function _arrayWithHoles$2(arr) { +function _arrayWithHoles$1(arr) { if (Array.isArray(arr)) return arr; } -function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); -} +function _iterableToArrayLimit$1(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; -function _iterableToArrayLimit$2(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -2835,16 +3388,16 @@ function _iterableToArrayLimit$2(arr, i) { return _arr; } -function _unsupportedIterableToArray$2(o, minLen) { +function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; - if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); + if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); } -function _arrayLikeToArray$2(arr, len) { +function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { @@ -2854,256 +3407,1909 @@ function _arrayLikeToArray$2(arr, len) { return arr2; } -function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); -} - -function _nonIterableRest$2() { +function _nonIterableRest$1() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -var Pagination = function Pagination(_ref) { - var _args$children, _properties; - - var limit = _ref.limit, - skip = _ref.skip, - results = _ref.results, - skipToFirstLabel = _ref.skipToFirstLabel, - previousLabel = _ref.previousLabel, - nextLabel = _ref.nextLabel, - skipToLastLabel = _ref.skipToLastLabel, - pagesToBottom = _ref.pagesToBottom, - args = _objectWithoutProperties$8(_ref, ["limit", "skip", "results", "skipToFirstLabel", "previousLabel", "nextLabel", "skipToLastLabel", "pagesToBottom"]); +function ownKeys$1(object, enumerableOnly) { + var keys = Object.keys(object); - var componentChildren = args.children ? ((_args$children = args.children) === null || _args$children === void 0 ? void 0 : _args$children.length) > 1 ? _toConsumableArray(args.children) : [args.children] : [], - childElements = [].concat(componentChildren, _toConsumableArray(args.child)), - elements = childElements.length, - pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit, - _useState = useState([]), - _useState2 = _slicedToArray$2(_useState, 2), - pagesArray = _useState2[0], - setPagesArray = _useState2[1], - _useState3 = useState("1"), - _useState4 = _slicedToArray$2(_useState3, 2), - selectedPage = _useState4[0], - setSelectedPage = _useState4[1], - _useState5 = useState(0), - _useState6 = _slicedToArray$2(_useState5, 2), - startIndex = _useState6[0], - setStartIndex = _useState6[1], - _useState7 = useState(pages >= 5 ? 5 : pages), - _useState8 = _slicedToArray$2(_useState7, 2), - endIndex = _useState8[0], - setEndIndex = _useState8[1], - _useState9 = useState(0), - _useState10 = _slicedToArray$2(_useState9, 2), - pageClickCounter = _useState10[0], - setPageClickCounter = _useState10[1], - _useState11 = useState(0), - _useState12 = _slicedToArray$2(_useState11, 2), - elementsStartIndex = _useState12[0], - setElementsStartIndex = _useState12[1], - _useState13 = useState(limit), - _useState14 = _slicedToArray$2(_useState13, 2), - elementsEndIndex = _useState14[0], - setElementsEndIndex = _useState14[1]; + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } - useEffect(function () { - var pagesArray = []; + return keys; +} - for (var i = 1; i <= pages; ++i) { - pagesArray.push(i); - } +function _objectSpread2$1(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { + _defineProperty$1(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } - setPagesArray(pagesArray); - }, []); - useEffect(function () { - selectedPage >= endIndex && incrementIndexes(); - selectedPage <= startIndex + 1 && decrementIndexes(); - }, [pageClickCounter]); - useEffect(function () { - if (selectedPage !== "1") { - setElementsStartIndex(selectedPage * limit - limit); - setElementsEndIndex(selectedPage * limit); - } - }, [selectedPage]); + return target; +} - var handleSkipToFirstPage = function handleSkipToFirstPage() { - setSelectedPage(1); - setStartIndex(0); - setEndIndex(pages >= 5 ? 5 : pages); - }; +function _defineProperty$1(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } - var handleSkipToLastPage = function handleSkipToLastPage() { - setSelectedPage(pages); - setStartIndex(pages >= 5 ? pages - 5 : 0); - setEndIndex(pages); - }; + return obj; +} - var handlePreviousPage = function handlePreviousPage() { - selectedPage > 1 && setSelectedPage(selectedPage - 1); - decrementIndexes(); - }; +function _objectWithoutPropertiesLoose$1(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; - var handleNextPage = function handleNextPage() { - selectedPage < pages && setSelectedPage(parseInt(selectedPage) + 1); - incrementIndexes(); - }; + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } - var decrementIndexes = function decrementIndexes() { - if (selectedPage - 1 <= startIndex + 1 && startIndex !== 0) { - setStartIndex(startIndex - 1); - setEndIndex(endIndex - 1); - } - }; + return target; +} - var incrementIndexes = function incrementIndexes() { - if (selectedPage + 1 >= endIndex && endIndex !== pages) { - setStartIndex(startIndex + 1); - setEndIndex(endIndex + 1); - } - }; +function _objectWithoutProperties$1(source, excluded) { + if (source == null) return {}; - var handlePreviousEllipsis = function handlePreviousEllipsis() { - setSelectedPage(startIndex >= 5 ? endIndex - 6 : endIndex - startIndex - 1); - setStartIndex(startIndex >= 5 ? startIndex - 5 : 0); - setEndIndex(startIndex >= 5 ? endIndex - 5 : endIndex - startIndex); - }; + var target = _objectWithoutPropertiesLoose$1(source, excluded); - var handleNextEllipsis = function handleNextEllipsis() { - setSelectedPage(pages - endIndex >= 5 ? startIndex + 7 : pages - endIndex + startIndex + 2); - setStartIndex(pages - endIndex >= 5 ? startIndex + 5 : pages - endIndex + startIndex); - setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages); - }; + var key, i; - var handlePageClick = /*#__PURE__*/function () { - var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(page) { - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - setSelectedPage(page); - setPageClickCounter(pageClickCounter + 1); + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - case 2: - case "end": - return _context.stop(); - } - } - }, _callee); - })); + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } - return function handlePageClick(_x) { - return _ref2.apply(this, arguments); - }; - }(); + return target; +} - var properties = (_properties = { - childElements: childElements, - elementsStartIndex: elementsStartIndex, - elementsEndIndex: elementsEndIndex, - handlePageClick: handlePageClick, - handleNextEllipsis: handleNextEllipsis, - handlePreviousEllipsis: handlePreviousEllipsis, - handleNextPage: handleNextPage, - handlePreviousPage: handlePreviousPage, - handleSkipToLastPage: handleSkipToLastPage, - handleSkipToFirstPage: handleSkipToFirstPage, - pagesArray: pagesArray, - selectedPage: selectedPage, - startIndex: startIndex, - endIndex: endIndex, - pages: pages, - results: results, - skipToFirstLabel: skipToFirstLabel, - previousLabel: previousLabel, - nextLabel: nextLabel, - skipToLastLabel: skipToLastLabel, - skip: skip - }, _defineProperty$6(_properties, "results", results), _defineProperty$6(_properties, "elements", elements), _properties); - if (args === null || args === void 0 ? void 0 : args.paginationContent) return /*#__PURE__*/React.createElement(React.Fragment, null, args === null || args === void 0 ? void 0 : args.paginationContent(_objectSpread2$5({}, properties)));else return /*#__PURE__*/React.createElement(React.Fragment, null, pagesToBottom && PaginationResults(_objectSpread2$5({}, properties)), PaginationNav(_objectSpread2$5({}, properties)), !pagesToBottom && PaginationResults(_objectSpread2$5({}, properties))); -}; +var _excluded$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; -var PaginationResults = function PaginationResults(_ref3) { - var _React$Children$map; +var ButtonIcon = function ButtonIcon(_ref) { + var label = _ref.label, + icon = _ref.icon, + iconSize = _ref.iconSize, + _ref$design = _ref.design, + design = _ref$design === void 0 ? 'solid' : _ref$design, + color = _ref.color, + className = _ref.className, + loading = _ref.loading, + props = _objectWithoutProperties$1(_ref, _excluded$2); - var properties = _extends$6({}, _ref3); + var loader = /*#__PURE__*/React.createElement("span", { + className: "sui-icon-loader sui-loading", + style: { + position: 'relative' + }, + "aria-hidden": "true" + }); + var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), + "aria-hidden": "true" + }), /*#__PURE__*/React.createElement("span", { + className: "sui-screen-reader-text" + }, label)); + className = "sui-button-icon ".concat(className || ''); // Set button color. - return (_React$Children$map = React.Children.map(properties.childElements, function (data) { - return /*#__PURE__*/React.cloneElement(data); - })) === null || _React$Children$map === void 0 ? void 0 : _React$Children$map.slice(properties.elementsStartIndex, properties.elementsEndIndex); -}; + switch (color) { + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; + break; -var PaginationNav = function PaginationNav(_ref4) { - var _properties$pagesArra, _properties$pagesArra2; + case 'gray': + default: + className += ''; + break; + } // Set button style. - var properties = _extends$6({}, _ref4); - return properties.pagesArray.length > 1 && /*#__PURE__*/React.createElement("div", { - className: "sui-pagination-wrap" - }, properties.results && /*#__PURE__*/React.createElement("span", { - className: "sui-pagination-results" - }, properties.elements, " results"), /*#__PURE__*/React.createElement("ul", { - className: "sui-pagination" - }, properties.skip && /*#__PURE__*/React.createElement("li", { - onClick: properties.handleSkipToFirstPage - }, /*#__PURE__*/React.createElement("a", { - disabled: properties.selectedPage <= 1 - }, /*#__PURE__*/React.createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.skipToFirstLabel || "Go to first page"), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true", - title: properties.skipToFirstLabel || "Go to first page", - className: "sui-icon-arrow-skip-back" - }))), /*#__PURE__*/React.createElement("li", { - onClick: properties.handlePreviousPage - }, /*#__PURE__*/React.createElement("a", { - disabled: properties.selectedPage <= 1 - }, /*#__PURE__*/React.createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.previousLabel || "Go to previous page"), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true", - title: properties.previousLabel || "Go to previous page", - className: "sui-icon-chevron-left" - }))), properties.startIndex > 0 && /*#__PURE__*/React.createElement("li", { - onClick: properties.handlePreviousEllipsis - }, /*#__PURE__*/React.createElement("a", null, "\u2026")), (_properties$pagesArra = properties.pagesArray) === null || _properties$pagesArra === void 0 ? void 0 : (_properties$pagesArra2 = _properties$pagesArra.slice(properties.startIndex, properties.endIndex)) === null || _properties$pagesArra2 === void 0 ? void 0 : _properties$pagesArra2.map(function (data, index) { - return /*#__PURE__*/React.createElement("li", { - onClick: function onClick() { - return properties.handlePageClick(parseInt(data)); - }, - key: index - }, /*#__PURE__*/React.createElement("a", { - "aria-selected": properties.selectedPage === data, - className: properties.selectedPage == data ? "sui-active" : "" - }, data)); - }), properties.endIndex < properties.pages && /*#__PURE__*/React.createElement("li", { - onClick: properties.handleNextEllipsis - }, /*#__PURE__*/React.createElement("a", null, "\u2026")), /*#__PURE__*/React.createElement("li", { - onClick: properties.handleNextPage - }, /*#__PURE__*/React.createElement("a", { - disabled: properties.selectedPage >= properties.pages - }, /*#__PURE__*/React.createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.nextLabel || "Go to next page."), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true", - title: properties.nextLabel || "Go to next page.", - className: "sui-icon-chevron-right" - }))), properties.skip && /*#__PURE__*/React.createElement("li", { - onClick: properties.handleSkipToLastPage - }, /*#__PURE__*/React.createElement("a", { - disabled: properties.selectedPage >= properties.pages - }, /*#__PURE__*/React.createElement("span", { - "aria-hidden": "false", - className: "sui-screen-reader-text" - }, properties.skipToLastLabel || "Go to last page."), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true", - title: properties.skipToLastLabel || "Go to last page", - className: "sui-icon-arrow-skip-forward" - }))))); + switch (design) { + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; + break; + + case 'solid': + default: + className += ''; + break; + } // Set loading class. + + + if (loading) { + className += ' sui-button-onload'; + } + + var htmlTag = props.href ? 'a' : 'button'; + return /*#__PURE__*/React.createElement(htmlTag, _objectSpread2$1({ + className: className, + disabled: props.disabled || loading + }, props), loading ? loader : content); +}; + +function _extends$2() { + _extends$2 = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends$2.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose$3(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties$3(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose$3(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var _excluded$1 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"]; + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties$3(_ref, _excluded$1); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React.createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React.createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React.createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React.createElement("input", _extends$2({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React.createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React.createElement("input", _extends$2({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label)); +}; + +var _excluded$3 = ["children"], + _excluded2 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded3 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded4 = ["children"]; + +var _templateObject; + +var ItemImage = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: 30px;\n\theight: 30px;\n\tmargin-right: 10px;\n\tborder-radius: 10px;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n\tbackground-position: center;\n"]))); + +var useToggle = function useToggle() { + var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + var _useState = useState(initialValue), + _useState2 = _slicedToArray$1(_useState, 2), + value = _useState2[0], + setValue = _useState2[1]; + + var toggle = useCallback(function () { + setValue(function (v) { + return !v; + }); + }, []); + return [value, toggle]; +}; + +var Accordion = function Accordion(_ref) { + var children = _ref.children, + props = _objectWithoutProperties$2(_ref, _excluded$3); + + return /*#__PURE__*/React.createElement("div", _extends$1({ + className: "sui-accordion" + }, props), children); +}; + +var AccordionItem = function AccordionItem(_ref2) { + var title = _ref2.title, + titleSize = _ref2.titleSize, + icon = _ref2.icon, + image = _ref2.image, + children = _ref2.children, + checkboxInput = _ref2.checkboxInput, + checkboxId = _ref2.checkboxId, + checkboxName = _ref2.checkboxName, + checkboxLabel = _ref2.checkboxLabel, + checkboxSelected = _ref2.checkboxSelected, + checkboxClickHandler = _ref2.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref2, _excluded2); + + var _useToggle = useToggle(), + _useToggle2 = _slicedToArray$1(_useToggle, 2), + isOpen = _useToggle2[0], + setIsOpen = _useToggle2[1]; + + return /*#__PURE__*/React.createElement("div", _extends$1({ + className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') + }, props), /*#__PURE__*/React.createElement(AccordionItemHeader, { + state: isOpen ? 'true' : 'false', + title: title, + titleSize: titleSize, + icon: icon, + image: image, + onClick: setIsOpen, + checkboxInput: checkboxInput, + checkboxId: checkboxId, + checkboxSelected: checkboxSelected, + checkboxClickHandler: checkboxClickHandler, + checkboxName: checkboxName, + checkboxLabel: checkboxLabel + }), /*#__PURE__*/React.createElement(AccordionItemBody, null, children)); +}; + +var AccordionItemHeader = function AccordionItemHeader(_ref3) { + var title = _ref3.title, + titleSize = _ref3.titleSize, + icon = _ref3.icon, + image = _ref3.image, + children = _ref3.children, + checkboxInput = _ref3.checkboxInput, + checkboxId = _ref3.checkboxId, + checkboxName = _ref3.checkboxName, + checkboxLabel = _ref3.checkboxLabel, + checkboxSelected = _ref3.checkboxSelected, + checkboxClickHandler = _ref3.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref3, _excluded3); + + var _useState3 = useState(false), + _useState4 = _slicedToArray$1(_useState3, 1), + isOpen = _useState4[0]; + + var countChildren = React.Children.toArray(children).length; + var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React.createElement("span", { + className: "sui-icon-".concat(icon), + "aria-hidden": "true" + }) : ''; + var titleColumnImage = 'undefined' !== typeof image && '' !== image ? /*#__PURE__*/React.createElement(ItemImage, { + style: { + backgroundImage: "url(".concat(image, ")") + } + }) : ''; + var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; + var checkboxItem = checkboxInput ? /*#__PURE__*/React.createElement(RadioCheckboxInput, { + type: "checkbox", + id: checkboxId, + name: checkboxName, + defaultChecked: checkboxSelected, + onChange: checkboxClickHandler, + label: checkboxLabel + }) : ''; + var titleColumn = /*#__PURE__*/React.createElement("div", { + className: "sui-accordion-item-title".concat(titleColumnSize) + }, checkboxItem, titleColumnIcon, titleColumnImage, title); + var indicator = /*#__PURE__*/React.createElement(ButtonIcon, { + icon: "chevron-down", + label: isOpen ? 'Close section' : 'Open section', + className: "sui-button-icon sui-accordion-open-indicator" + }); + var columns = React.Children.map(children, function (column, index) { + index++; + var columnSize = column.props.size; + var columnClass = 'undefined' !== typeof columnSize && '' !== columnSize ? 'sui-accordion-col-' + columnSize : 'sui-accordion-col-auto'; + var columnContent = column.props.children; + return /*#__PURE__*/React.createElement("div", { + className: columnClass + }, columnContent, countChildren === index && indicator); + }); + var actions = /*#__PURE__*/React.createElement("div", { + className: "sui-accordion-col-auto" + }, indicator); + return /*#__PURE__*/React.createElement("div", _extends$1({ + className: "sui-accordion-item-header" + }, props), titleColumn, countChildren > 0 ? columns : actions); +}; + +var AccordionItemBody = function AccordionItemBody(_ref4) { + var children = _ref4.children, + props = _objectWithoutProperties$2(_ref4, _excluded4); + + return /*#__PURE__*/React.createElement("div", _extends$1({ + className: "sui-accordion-item-body" + }, props), children); +}; + +function ownKeys(object, enumerableOnly) { + var keys = Object.keys(object); + + if (Object.getOwnPropertySymbols) { + var symbols = Object.getOwnPropertySymbols(object); + enumerableOnly && (symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + })), keys.push.apply(keys, symbols); + } + + return keys; +} + +function _objectSpread2(target) { + for (var i = 1; i < arguments.length; i++) { + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); + } + + return target; +} + +function _typeof(obj) { + "@babel/helpers - typeof"; + + return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { + return typeof obj; + } : function (obj) { + return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }, _typeof(obj); +} + +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + Object.defineProperty(Constructor, "prototype", { + writable: false + }); + return Constructor; +} + +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + Object.defineProperty(subClass, "prototype", { + writable: false + }); + if (superClass) _setPrototypeOf(subClass, superClass); +} + +function _getPrototypeOf(o) { + _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); +} + +function _setPrototypeOf(o, p) { + _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); +} + +function _isNativeReflectConstruct() { + if (typeof Reflect === "undefined" || !Reflect.construct) return false; + if (Reflect.construct.sham) return false; + if (typeof Proxy === "function") return true; + + try { + Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); + return true; + } catch (e) { + return false; + } +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} + +function _possibleConstructorReturn(self, call) { + if (call && (_typeof$1(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } + + return _assertThisInitialized(self); +} + +function _createSuper(Derived) { + var hasNativeReflectConstruct = _isNativeReflectConstruct(); + + return function _createSuperInternal() { + var Super = _getPrototypeOf(Derived), + result; + + if (hasNativeReflectConstruct) { + var NewTarget = _getPrototypeOf(this).constructor; + + result = Reflect.construct(Super, arguments, NewTarget); + } else { + result = Super.apply(this, arguments); + } + + return _possibleConstructorReturn(this, result); + }; +} + +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} + +function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; +} + +function _iterableToArrayLimit(arr, i) { + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; + var _arr = []; + var _n = true; + var _d = false; + + var _s, _e; + + try { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; +} + +function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} + +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + + return arr2; +} + +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} + +function _createForOfIteratorHelper(o, allowArrayLike) { + var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; + + if (!it) { + if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { + if (it) o = it; + var i = 0; + + var F = function F() {}; + + return { + s: F, + n: function n() { + if (i >= o.length) return { + done: true + }; + return { + done: false, + value: o[i++] + }; + }, + e: function e(_e2) { + throw _e2; + }, + f: F + }; + } + + throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + var normalCompletion = true, + didErr = false, + err; + return { + s: function s() { + it = it.call(o); + }, + n: function n() { + var step = it.next(); + normalCompletion = step.done; + return step; + }, + e: function e(_e3) { + didErr = true; + err = _e3; + }, + f: function f() { + try { + if (!normalCompletion && it["return"] != null) it["return"](); + } finally { + if (didErr) throw err; + } + } + }; +} // https://github.com/davidtheclark/no-scroll/blob/master/index.js + + +var isOn = false; +var scrollbarSize; +var scrollTop; + +function getScrollbarSize() { + if (typeof scrollbarSize !== 'undefined') return scrollbarSize; + var doc = document.documentElement; + var dummyScroller = document.createElement('div'); + dummyScroller.setAttribute('style', 'width:99px;height:99px;' + 'position:absolute;top:-9999px;overflow:scroll;'); + doc.appendChild(dummyScroller); + scrollbarSize = dummyScroller.offsetWidth - dummyScroller.clientWidth; + doc.removeChild(dummyScroller); + return scrollbarSize; +} + +function hasScrollbar() { + return document.documentElement.scrollHeight > window.innerHeight; +} + +function on() { + if (typeof document === 'undefined' || isOn) return; + var doc = document.documentElement; + scrollTop = window.pageYOffset; + + if (hasScrollbar()) { + doc.style.width = 'calc(100% - ' + getScrollbarSize() + 'px)'; + } else { + doc.style.width = '100%'; + } + + doc.style.position = 'fixed'; + doc.style.top = -scrollTop + 'px'; + doc.style.overflow = 'hidden'; + isOn = true; +} + +function off() { + if (typeof document === 'undefined' || !isOn) return; + var doc = document.documentElement; + doc.style.width = ''; + doc.style.position = ''; + doc.style.top = ''; + doc.style.overflow = ''; + + if (typeof scrollTop === 'number') { + window.scroll(0, scrollTop); + } + + isOn = false; +} // https://github.com/davidtheclark/tabbable/blob/master/src/index.js + + +var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])']; +var candidateSelector = candidateSelectors.join(','); +var matches = typeof Element === 'undefined' ? function () { + return false; +} : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; + +function getHTMLElements(root, selector) { + var result = []; + + var _iterator = _createForOfIteratorHelper(root.querySelectorAll(selector)), + _step; + + try { + for (_iterator.s(); !(_step = _iterator.n()).done;) { + var el = _step.value; + + if (el instanceof HTMLElement) { + result.push(el); + } + } + } catch (err) { + _iterator.e(err); + } finally { + _iterator.f(); + } + + return result; +} + +function tabbable(el, optionalOptions) { + var options = optionalOptions || {}; + var regularTabbables = []; + var orderedTabbables = []; + var candidates = getHTMLElements(el, candidateSelector); + + if (options.includeContainer) { + if (matches.call(el, candidateSelector)) { + candidates = Array.prototype.slice.apply(candidates); + candidates.unshift(el); + } + } + + var candidate; + var candidateTabindex; + + for (var i = 0; i < candidates.length; i++) { + candidate = candidates[i]; + + if (!isNodeMatchingSelectorTabbable(candidate)) { + continue; + } + + candidateTabindex = getTabindex(candidate); + + if (candidateTabindex === 0) { + regularTabbables.push(candidate); + } else { + orderedTabbables.push({ + documentOrder: i, + tabIndex: candidateTabindex, + node: candidate + }); + } + } + + var tabbableNodes = orderedTabbables.sort(sortOrderedTabbables).map(function (a) { + return a.node; + }).concat(regularTabbables); + return tabbableNodes; +} + +tabbable.isTabbable = isTabbable; +tabbable.isFocusable = isFocusable; + +function isNodeMatchingSelectorTabbable(node) { + if (!isNodeMatchingSelectorFocusable(node) || isNonTabbableRadio(node) || getTabindex(node) < 0) { + return false; + } + + return true; +} + +function isTabbable(node) { + if (!node) { + throw new Error('No node provided'); + } + + if (matches.call(node, candidateSelector) === false) { + return false; + } + + return isNodeMatchingSelectorTabbable(node); +} + +function isNodeMatchingSelectorFocusable(node) { + if (node.disabled || isHiddenInput(node) || isHidden(node)) { + return false; + } + + return true; +} + +var focusableCandidateSelector = candidateSelectors.concat('iframe').join(','); + +function isFocusable(node) { + if (!node) { + throw new Error('No node provided'); + } // Added this to make TypeScript work. + + + if (!(node instanceof HTMLElement)) return false; + + if (matches.call(node, focusableCandidateSelector) === false) { + return false; + } + + return isNodeMatchingSelectorFocusable(node); +} + +function getTabindex(node) { + var tabindexAttr = parseInt(node.getAttribute('tabindex') || '', 10); + + if (!isNaN(tabindexAttr)) { + return tabindexAttr; + } // Browsers do not return `tabIndex` correctly for contentEditable nodes; + // so if they don't have a tabindex attribute specifically set, assume it's 0. + + + if (isContentEditable(node)) { + return 0; + } + + return node.tabIndex; +} + +function sortOrderedTabbables(a, b) { + return a.tabIndex === b.tabIndex ? a.documentOrder - b.documentOrder : a.tabIndex - b.tabIndex; +} + +function isContentEditable(node) { + return node.contentEditable === 'true'; +} + +function isInput(node) { + return node.tagName === 'INPUT'; +} + +function isHiddenInput(node) { + return isInput(node) && node.type === 'hidden'; +} + +function isRadio(node) { + return isInput(node) && node.type === 'radio'; +} + +function isNonTabbableRadio(node) { + return isRadio(node) && !isTabbableRadio(node); +} + +function getCheckedRadio(nodes) { + for (var i = 0; i < nodes.length; i++) { + if (nodes[i].checked) { + return nodes[i]; + } + } + + return undefined; +} + +function isTabbableRadio(node) { + if (!node.name) { + return true; + } + + if (!node.ownerDocument) { + // Need this for TypeScript to be OK with the rest of this code. + // I guess we'll just assume that anything without an owner + // document isn't tabbable... + return false; + } // This won't account for the edge case where you have radio groups with the same + // in separate forms on the same page. + + + var radioSet = Array.from(node.ownerDocument.querySelectorAll('input[type="radio"][name="' + node.name + '"]')); + var checked = getCheckedRadio(radioSet); + return !checked || checked === node; +} + +function isHidden(node) { + // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element, + // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well. + return node.offsetParent === null || getComputedStyle(node).visibility === 'hidden'; +} + +var activeFocusDelay; + +var activeFocusTraps = function () { + var trapQueue = []; + return { + activateTrap: function activateTrap(trap) { + if (trapQueue.length > 0) { + var activeTrap = trapQueue[trapQueue.length - 1]; + + if (activeTrap !== trap) { + activeTrap.pause(); + } + } + + var trapIndex = trapQueue.indexOf(trap); + + if (trapIndex === -1) { + trapQueue.push(trap); + } else { + // move this existing trap to the front of the queue + trapQueue.splice(trapIndex, 1); + trapQueue.push(trap); + } + }, + deactivateTrap: function deactivateTrap(trap) { + var trapIndex = trapQueue.indexOf(trap); + + if (trapIndex !== -1) { + trapQueue.splice(trapIndex, 1); + } + + if (trapQueue.length > 0) { + trapQueue[trapQueue.length - 1].unpause(); + } + } + }; +}(); + +function getHTMLElement(doc, selector) { + var el = doc.querySelector(selector); + + if (!(el && el instanceof HTMLElement)) { + throw new Error("No HTML element matches \"".concat(selector, "\"!")); + } + + return el; +} + +function createFocusTrap(element, userOptions) { + var doc = document; + var container = typeof element === 'string' ? getHTMLElement(doc, element) : element; + + var config = _objectSpread2({ + returnFocusOnDeactivate: true, + escapeDeactivates: true + }, userOptions); + + var state = { + firstTabbableNode: null, + lastTabbableNode: null, + nodeFocusedBeforeActivation: null, + mostRecentlyFocusedNode: null, + active: false, + paused: false + }; + var trap = { + activate: activate, + deactivate: deactivate, + pause: pause, + unpause: unpause + }; + return trap; + + function activate(activateOptions) { + if (state.active) return; + updateTabbableNodes(); + state.active = true; + state.paused = false; + state.nodeFocusedBeforeActivation = doc.activeElement; + var onActivate = activateOptions && activateOptions.onActivate ? activateOptions.onActivate : config.onActivate; + + if (onActivate) { + onActivate(); + } + + addListeners(); + return trap; + } + + function deactivate(deactivateOptions) { + if (!state.active) return; + clearTimeout(activeFocusDelay); + removeListeners(); + state.active = false; + state.paused = false; + activeFocusTraps.deactivateTrap(trap); + var onDeactivate = deactivateOptions && deactivateOptions.onDeactivate !== undefined ? deactivateOptions.onDeactivate : config.onDeactivate; + + if (onDeactivate) { + onDeactivate(); + } + + var returnFocus = deactivateOptions && deactivateOptions.returnFocus !== undefined ? deactivateOptions.returnFocus : config.returnFocusOnDeactivate; + + if (returnFocus) { + delay(function () { + tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)); + }); + } + + return trap; + } + + function containerContains(el) { + if (el && el instanceof Node) return container.contains(el); + return false; + } + + function pause() { + if (state.paused || !state.active) return; + state.paused = true; + removeListeners(); + } + + function unpause() { + if (!state.paused || !state.active) return; + state.paused = false; + updateTabbableNodes(); + addListeners(); + } + + function addListeners() { + if (!state.active) return; // There can be only one listening focus trap at a time + + activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event + // that caused the focus trap activation. + + activeFocusDelay = delay(function () { + tryFocus(getInitialFocusNode()); + }); + doc.addEventListener('focusin', checkFocusIn, true); + doc.addEventListener('mousedown', checkPointerDown, { + capture: true, + passive: false + }); + doc.addEventListener('touchstart', checkPointerDown, { + capture: true, + passive: false + }); + doc.addEventListener('click', checkClick, { + capture: true, + passive: false + }); + doc.addEventListener('keydown', checkKey, { + capture: true, + passive: false + }); + return trap; + } + + function removeListeners() { + if (!state.active) return; + doc.removeEventListener('focusin', checkFocusIn, true); + doc.removeEventListener('mousedown', checkPointerDown, true); + doc.removeEventListener('touchstart', checkPointerDown, true); + doc.removeEventListener('click', checkClick, true); + doc.removeEventListener('keydown', checkKey, true); + return trap; + } + + function getNodeForOption(optionName) { + var optionValue = config[optionName]; + var node = optionValue; + + if (!optionValue) { + return null; + } + + if (typeof optionValue === 'string') { + node = doc.querySelector(optionValue); + + if (!node) { + throw new Error('`' + optionName + '` refers to no known node'); + } + } + + if (typeof optionValue === 'function') { + node = optionValue(); + + if (!node) { + throw new Error('`' + optionName + '` did not return a node'); + } + } + + return node; + } + + function getInitialFocusNode() { + var node; + + if (getNodeForOption('initialFocus') !== null) { + node = getNodeForOption('initialFocus'); + } else if (container.contains(doc.activeElement)) { + node = doc.activeElement; + } else { + node = state.firstTabbableNode || getNodeForOption('fallbackFocus'); + } + + if (!node) { + throw new Error('Your focus-trap needs to have at least one focusable element'); + } + + return node; + } + + function getReturnFocusNode(previousActiveElement) { + var node = getNodeForOption('setReturnFocus'); + return node ? node : previousActiveElement; + } // This needs to be done on mousedown and touchstart instead of click + // so that it precedes the focus event. + + + function checkPointerDown(e) { + if (containerContains(e.target)) return; + + if (config.clickOutsideDeactivates) { + deactivate({ + returnFocus: !tabbable.isFocusable(e.target) + }); + return; + } // This is needed for mobile devices. + // (If we'll only let `click` events through, + // then on mobile they will be blocked anyways if `touchstart` is blocked.) + + + if (config.allowOutsideClick && config.allowOutsideClick(e)) { + return; + } + + e.preventDefault(); + } // In case focus escapes the trap for some strange reason, pull it back in. + + + function checkFocusIn(e) { + // In Firefox when you Tab out of an iframe the Document is briefly focused. + if (containerContains(e.target) || e.target instanceof Document) { + return; + } + + e.stopImmediatePropagation(); + tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); + } + + function checkKey(e) { + if (config.escapeDeactivates !== false && isEscapeEvent(e)) { + e.preventDefault(); + deactivate(); + return; + } + + if (isTabEvent(e)) { + checkTab(e); + return; + } + } // Hijack Tab events on the first and last focusable nodes of the trap, + // in order to prevent focus from escaping. If it escapes for even a + // moment it can end up scrolling the page and causing confusion so we + // kind of need to capture the action at the keydown phase. + + + function checkTab(e) { + updateTabbableNodes(); + + if (e.shiftKey && e.target === state.firstTabbableNode) { + e.preventDefault(); + tryFocus(state.lastTabbableNode); + return; + } + + if (!e.shiftKey && e.target === state.lastTabbableNode) { + e.preventDefault(); + tryFocus(state.firstTabbableNode); + return; + } + } + + function checkClick(e) { + if (config.clickOutsideDeactivates) return; + if (containerContains(e.target)) return; + + if (config.allowOutsideClick && config.allowOutsideClick(e)) { + return; + } + + e.preventDefault(); + e.stopImmediatePropagation(); + } + + function updateTabbableNodes() { + var tabbableNodes = tabbable(container); + state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode(); + state.lastTabbableNode = tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode(); + } + + function tryFocus(node) { + if (node === doc.activeElement) return; + + if (!node || !node.focus) { + tryFocus(getInitialFocusNode()); + return; + } + + node.focus({ + preventScroll: userOptions.preventScroll + }); + state.mostRecentlyFocusedNode = node; + + if (isSelectableInput(node)) { + node.select(); + } + } +} + +function isSelectableInput(node) { + return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function'; +} + +function isEscapeEvent(e) { + return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; +} + +function isTabEvent(e) { + return e.key === 'Tab' || e.keyCode === 9; +} + +function delay(fn) { + return window.setTimeout(fn, 0); +} + +function isFocusableElement(el) { + // This isn't actually a great way of testing this, but we want to + // preserve the original behavior while also satisfying TypeScript. + return el.focus; +} + +var ReactFocusTrap = /*#__PURE__*/function (_React$Component) { + _inherits(ReactFocusTrap, _React$Component); + + var _super = _createSuper(ReactFocusTrap); + + function ReactFocusTrap(props) { + var _this; + + _classCallCheck(this, ReactFocusTrap); + + _this = _super.call(this, props); + + _this.setFocusTrapElement = function (element) { + _this.focusTrapElement = element; + }; + + if (typeof document !== 'undefined') { + _this.previouslyFocusedElement = document.activeElement; + } + + return _this; + } + + _createClass(ReactFocusTrap, [{ + key: "componentDidMount", + value: function componentDidMount() { + // We need to hijack the returnFocusOnDeactivate option, + // because React can move focus into the element before we arrived at + // this lifecycle hook (e.g. with autoFocus inputs). So the component + // captures the previouslyFocusedElement in componentWillMount, + // then (optionally) returns focus to it in componentWillUnmount. + var specifiedFocusTrapOptions = this.props.focusTrapOptions; + var tailoredFocusTrapOptions = { + returnFocusOnDeactivate: false + }; + + for (var optionName in specifiedFocusTrapOptions) { + if (!Object.prototype.hasOwnProperty.call(specifiedFocusTrapOptions, optionName)) continue; + if (optionName === 'returnFocusOnDeactivate') continue; + tailoredFocusTrapOptions[optionName] = specifiedFocusTrapOptions[optionName]; + } // eslint-disable-next-line react/no-find-dom-node + + + var focusTrapElementDOMNode = ReactDOM.findDOMNode(this.focusTrapElement); + + if (!(focusTrapElementDOMNode instanceof HTMLElement)) { + throw new Error('Focus trap element DOM node is not an HTML element!'); + } + + this.focusTrap = this.props._createFocusTrap(focusTrapElementDOMNode, tailoredFocusTrapOptions); + + if (this.props.active) { + this.focusTrap.activate(); + } + + if (this.props.paused) { + this.focusTrap.pause(); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (!this.focusTrap) { + throw new Error('Assertion failure!'); + } + + if (prevProps.active && !this.props.active) { + var returnFocusOnDeactivate = this.props.focusTrapOptions.returnFocusOnDeactivate; + var returnFocus = returnFocusOnDeactivate || false; + var config = { + returnFocus: returnFocus + }; + this.focusTrap.deactivate(config); + } else if (!prevProps.active && this.props.active) { + this.focusTrap.activate(); + } + + if (prevProps.paused && !this.props.paused) { + this.focusTrap.unpause(); + } else if (!prevProps.paused && this.props.paused) { + this.focusTrap.pause(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (!this.focusTrap) { + throw new Error('Assertion failure!'); + } + + this.focusTrap.deactivate(); + + if (this.props.focusTrapOptions.returnFocusOnDeactivate !== false && this.previouslyFocusedElement && isFocusableElement(this.previouslyFocusedElement)) { + this.previouslyFocusedElement.focus(); + } + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var child = React.Children.only(this.props.children); + + var composedRefCallback = function composedRefCallback(element) { + _this2.setFocusTrapElement(element); + + if (typeof child.ref === 'function') { + child.ref(element); + } + }; + + var childWithRef = /*#__PURE__*/React.cloneElement(child, { + ref: composedRefCallback + }); + return childWithRef; + } + }]); + + return ReactFocusTrap; +}(React.Component); + +ReactFocusTrap.defaultProps = { + active: true, + paused: false, + focusTrapOptions: {}, + _createFocusTrap: createFocusTrap +}; + +function displace(WrappedComponent, optionalOptions) { + var options = optionalOptions || {}; + + var Displaced = /*#__PURE__*/function (_React$Component) { + _inherits(Displaced, _React$Component); + + var _super = _createSuper(Displaced); + + function Displaced() { + _classCallCheck(this, Displaced); + + return _super.apply(this, arguments); + } + + _createClass(Displaced, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.container = function () { + var renderTo = options.renderTo; + + if (!renderTo) { + var result = document.createElement('div'); + document.body.appendChild(result); + return result; + } else if (typeof renderTo === 'string') { + var el = document.querySelector(renderTo); + + if (!el) { + throw new Error("No element matches \"".concat(renderTo, "\"!")); + } + + return el; + } else { + return renderTo; + } + }(); + + this.forceUpdate(); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (!options.renderTo && this.container && this.container.parentNode) { + this.container.parentNode.removeChild(this.container); + } + } + }, { + key: "render", + value: function render() { + if (this.props.mounted === false) return null; + + if (this.container) { + return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(WrappedComponent, this.props, this.props.children), this.container); + } + + return false; + } + }]); + + return Displaced; + }(React.Component); + + return Displaced; +} + +var Modal$1 = /*#__PURE__*/function (_React$Component) { + _inherits(Modal, _React$Component); + + var _super = _createSuper(Modal); + + function Modal(props) { + var _this; + + _classCallCheck(this, Modal); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "clearTimer", function () { + var _this$timeout; + + (_this$timeout = _this.timeout) === null || _this$timeout === void 0 ? void 0 : _this$timeout.forEach(function (timer) { + clearTimeout(timer); + }); + }); + + _this.getApplicationNode = function () { + if (_this.props.getApplicationNode) return _this.props.getApplicationNode(); + return _this.props.applicationNode; + }; + + _this.checkUnderlayClick = function (event) { + if (_this.dialogNode && event.target instanceof Node && _this.dialogNode.contains(event.target) || // If the click is on the scrollbar we don't want to close the modal. + event.target instanceof Element && event.target.ownerDocument && (event.pageX > event.target.ownerDocument.documentElement.offsetWidth || event.pageY > event.target.ownerDocument.documentElement.offsetHeight)) return; + + _this.exit(event); + }; + + _this.checkDocumentKeyDown = function (event) { + if (_this.props.escapeExits && (event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27)) { + _this.exit(event); + } + }; + + _this.exit = function (event) { + if (_this.props.onExit) { + _this.props.onExit(event); + } + }; + + if (!_this.props.titleText && !_this.props.titleId) { + throw new Error('react-aria-modal instances should have a `titleText` or `titleId`'); + } + + _this.timeout = []; + return _this; + } + + _createClass(Modal, [{ + key: "componentDidMount", + value: function componentDidMount() { + if (this.props.onEnter) { + this.props.onEnter(); + } // Timeout to ensure this happens *after* focus has moved + + + var applicationNode = this.getApplicationNode(); + this.timeout.push(setTimeout(function () { + if (applicationNode && applicationNode instanceof Element) { + applicationNode.setAttribute("aria-hidden", "true"); + } + }, 0)); + + if (this.props.escapeExits) { + this.timeout.push(this.addKeyDownListener()); + } + + if (this.props.scrollDisabled) { + on(); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (prevProps.scrollDisabled && !this.props.scrollDisabled) { + off(); + } else if (!prevProps.scrollDisabled && this.props.scrollDisabled) { + on(); + } + + if (this.props.escapeExits && !prevProps.escapeExits) { + this.timeout.push(this.addKeyDownListener()); + } else if (!this.props.escapeExits && prevProps.escapeExits) { + this.timeout.push(this.removeKeyDownListener()); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + if (this.props.scrollDisabled) { + off(); + } + + var applicationNode = this.getApplicationNode(); + + if (applicationNode && applicationNode instanceof Element) { + applicationNode.setAttribute('aria-hidden', 'false'); + } + + this.timeout.push(this.removeKeyDownListener()); + this.clearTimer(); + } + }, { + key: "addKeyDownListener", + value: function addKeyDownListener() { + var _this2 = this; + + return setTimeout(function () { + document.addEventListener("keydown", _this2.checkDocumentKeyDown); + }); + } + }, { + key: "removeKeyDownListener", + value: function removeKeyDownListener() { + var _this3 = this; + + return setTimeout(function () { + document.removeEventListener("keydown", _this3.checkDocumentKeyDown); + }); + } + }, { + key: "render", + value: function render() { + var _this4 = this; + + var props = this.props; + var style = {}; // @edited + // if (props.includeDefaultStyles) { + // style = { + // position: "fixed", + // top: 0, + // left: 0, + // width: "100%", + // height: "100%", + // zIndex: 1050, + // overflowX: "hidden", + // overflowY: "auto", + // WebkitOverflowScrolling: "touch", + // textAlign: "center" + // }; + // if (props.underlayColor) { + // style.background = props.underlayColor; + // } + // if (props.underlayClickExits) { + // style.cursor = "pointer"; + // } + // } + + if (props.underlayStyle) { + for (var key in props.underlayStyle) { + if (!Object.prototype.hasOwnProperty.call(props.underlayStyle, key)) continue; + style[key] = props.underlayStyle[key]; + } + } + + var underlayProps = { + className: props.underlayClass, + style: style + }; + + if (props.underlayClickExits) { + underlayProps.onMouseDown = this.checkUnderlayClick; + } + + for (var prop in this.props.underlayProps) { + underlayProps[prop] = this.props.underlayProps[prop]; + } + + var verticalCenterStyle = {}; // @edited + // if (props.includeDefaultStyles) { + // verticalCenterStyle = { + // display: "inline-block", + // height: "100%", + // verticalAlign: "middle" + // }; + // } + + var dialogStyle = {}; // @edited + // if (props.includeDefaultStyles) { + // dialogStyle = { + // display: "inline-block", + // textAlign: "left", + // top: 0, + // maxWidth: "100%", + // cursor: "default", + // outline: props.focusDialog ? 0 : undefined + // }; + // if (props.verticallyCenter) { + // dialogStyle.verticalAlign = "middle"; + // dialogStyle.top = 0; + // } + // } + + if (props.dialogStyle) { + for (var _key in props.dialogStyle) { + if (!Object.prototype.hasOwnProperty.call(props.dialogStyle, _key)) continue; + dialogStyle[_key] = props.dialogStyle[_key]; + } + } + + var dialogProps = { + key: 'b', + ref: function ref(el) { + _this4.dialogNode = el; + }, + role: props.alert ? 'alertdialog' : 'dialog', + id: props.dialogId, + className: props.dialogClass, + style: dialogStyle + }; + + if (props.titleId) { + dialogProps['aria-labelledby'] = props.titleId; + } else if (props.titleText) { + dialogProps['aria-label'] = props.titleText; + } + + if (props.focusDialog) { + dialogProps.tabIndex = -1; + } // Apply data- and aria- attributes passed as props + + + for (var _key2 in props) { + if (/^(data-|aria-)/.test(_key2)) { + dialogProps[_key2] = props[_key2]; + } + } + + var childrenArray = [/*#__PURE__*/React.createElement('div', _objectSpread2({}, dialogProps), props.children)]; + + if (props.verticallyCenter) { + childrenArray.unshift( /*#__PURE__*/React.createElement('div', { + key: 'a', + style: verticalCenterStyle + })); + } + + var focusTrapOptions = props.focusTrapOptions || {}; + + if (props.focusDialog || props.initialFocus) { + focusTrapOptions.initialFocus = props.focusDialog ? "#".concat(this.props.dialogId) : props.initialFocus; + } + + focusTrapOptions.escapeDeactivates = props.escapeExits; + return /*#__PURE__*/React.createElement(ReactFocusTrap, { + focusTrapOptions: focusTrapOptions, + paused: props.focusTrapPaused + }, /*#__PURE__*/React.createElement('div', _objectSpread2({}, underlayProps), childrenArray)); + } + }]); + + return Modal; +}(React.Component); + +Modal$1.defaultProps = { + underlayProps: {}, + dialogId: 'react-aria-modal-dialog', + // @edited + // underlayClickExits: true, + escapeExits: true, + // @edited + // underlayColor: "rgba(0,0,0,0.5)", + // includeDefaultStyles: true, + focusTrapPaused: false, + scrollDisabled: true +}; +var AriaModal = displace(Modal$1); + +AriaModal.renderTo = function (input) { + return displace(Modal$1, { + renderTo: input + }); +}; + +var _excluded = ["modalContent", "triggerContent"]; + +var Modal = function Modal(_ref) { + var modalContent = _ref.modalContent, + triggerContent = _ref.triggerContent, + props = _objectWithoutProperties(_ref, _excluded); + + var _React$useState = React.useState(false), + _React$useState2 = _slicedToArray(_React$useState, 2), + isOpen = _React$useState2[0], + setIsOpen = _React$useState2[1]; + + var _React$useState3 = React.useState(false), + _React$useState4 = _slicedToArray(_React$useState3, 2), + isClosing = _React$useState4[0], + setIsClosing = _React$useState4[1]; // States for sliders. + + + var _React$useState5 = React.useState(props.firstSlide), + _React$useState6 = _slicedToArray(_React$useState5, 2), + currentSlide = _React$useState6[0], + setCurrentSlide = _React$useState6[1]; + + var _React$useState7 = React.useState(null), + _React$useState8 = _slicedToArray(_React$useState7, 2), + slideDirection = _React$useState8[0], + setSlideDirection = _React$useState8[1]; + + React.useEffect(function () { + if (!props.dialogId) { + throw new Error('SUI Modal instances should have a `dialogId`'); + } + }, [props.dialogId]); + var isSlider = 'object' === _typeof(modalContent) && null !== modalContent; + + var openModal = function openModal() { + return setIsOpen(true); + }; + + var closeModal = function closeModal() { + // Close the modal with the exit animation and reset the slider. + setIsClosing(true); + setTimeout(function () { + setIsOpen(false); + setIsClosing(false); + + if (isSlider) { + setSlideDirection(null); + setCurrentSlide(props.firstSlide); + } + }, 300); + }; + + var slideTo = function slideTo(slide) { + var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left'; + setCurrentSlide(slide); + setSlideDirection(direction); + }; + + var _props$getApplication = props.getApplicationNode, + getApplicationNode = _props$getApplication === void 0 ? function () { + return document.getElementsByClassName('sui-wrap')[0]; + } : _props$getApplication; + var dialogClass = "sui-modal-content sui-content-".concat(isClosing ? 'fade-out' : 'fade-in', " ").concat(props.dialogClass || ''); + var renderContent, modalSize, initialFocus; + + if (!isSlider) { + // Not a slider, we can just render the content. + renderContent = modalContent; + modalSize = props.size; + initialFocus = props.initialFocus || false; + } else { + // Render the content from the given slides. + renderContent = modalContent[currentSlide].render; + initialFocus = modalContent[currentSlide].focus || false; + modalSize = modalContent[currentSlide].size; // Add the slide direction class when provided and we're not closing the modal. + + if (slideDirection && !isClosing) { + dialogClass += "sui-modal-slide sui-active sui-fadein-".concat(slideDirection); + } + } // Use 'isOpen' as an alias of 'mounted' if not defined. + + + if ('undefined' === typeof props.mounted) { + props.mounted = isOpen; + } + + var wrapper = !props.renderToNode ? '.sui-wrap' : props.renderToNode; + var AltModal = wrapper ? AriaModal.renderTo(wrapper) : AriaModal; + return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AltModal, _extends({ + getApplicationNode: getApplicationNode, + dialogClass: dialogClass, + underlayClass: "sui-modal sui-modal-".concat(modalSize || 'md', " sui-active ").concat(props.underlayClass || ''), + includeDefaultStyle: false, + initialFocus: initialFocus + }, props), renderContent({ + closeModal: closeModal, + slideTo: slideTo + })), triggerContent && triggerContent({ + openModal: openModal + })); }; -export { Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, Box, BoxBody, BoxFooter, BoxHeader, BoxTitle, Button, ButtonIcon, Dropdown, Input, Modal, Notifications, Pagination, Post }; +export { Accordion, AccordionItem, AccordionItemBody, AccordionItemHeader, Box, BoxBody, BoxFooter, BoxHeader, BoxTitle, Button$1 as Button, ButtonIcon$5 as ButtonIcon, Dropdown, Input, Modal, Notifications, Pagination, Post, ProgressBar, RadioCheckboxGroup, RadioCheckboxInput$1 as RadioCheckboxInput, Toggle }; diff --git a/packages/core/lib/core.js b/packages/core/lib/core.js index f48cf0e2..361e243d 100644 --- a/packages/core/lib/core.js +++ b/packages/core/lib/core.js @@ -1,24 +1,24 @@ -import { - Box, - BoxHeader, - BoxTitle, - BoxBody, - BoxFooter -} from "@wpmudev/react-box"; -import { Input } from "@wpmudev/react-input"; -import { Button } from "@wpmudev/react-button"; -import { Modal } from "@wpmudev/react-modal"; -import { ButtonIcon } from "@wpmudev/react-button-icon"; -import { Post } from "@wpmudev/react-post"; -import { Notifications } from "@wpmudev/react-notifications"; -import { Dropdown } from "@wpmudev/react-dropdown"; +// Components. +import { Button } from '@wpmudev/react-button'; +import { ButtonIcon } from '@wpmudev/react-button-icon'; +import { Dropdown } from '@wpmudev/react-dropdown'; +import { Input } from '@wpmudev/react-input'; +import { Notifications } from '@wpmudev/react-notifications'; +import { Pagination } from '@wpmudev/react-pagination'; +import { Post } from '@wpmudev/react-post'; +import { ProgressBar } from '@wpmudev/react-progress-bar'; +import { Toggle } from '@wpmudev/react-toggle'; +import { RadioCheckboxGroup, RadioCheckboxInput } from '@wpmudev/react-radio-checkbox'; + +// Containers. +import { Box, BoxHeader, BoxTitle, BoxBody, BoxFooter } from '@wpmudev/react-box'; import { Accordion, AccordionItem, AccordionItemHeader, - AccordionItemBody -} from "@wpmudev/react-accordion"; -import { Pagination } from "@wpmudev/react-pagination"; + AccordionItemBody, +} from '@wpmudev/react-accordion'; +import { Modal } from '@wpmudev/react-modal'; export { Box, @@ -37,5 +37,9 @@ export { AccordionItem, AccordionItemHeader, AccordionItemBody, - Pagination + Pagination, + ProgressBar, + Toggle, + RadioCheckboxGroup, + RadioCheckboxInput }; diff --git a/packages/core/package.json b/packages/core/package.json index 7b3d8614..d815a602 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@wpmudev/shared-ui-react", - "version": "1.8.0", + "version": "1.9.1", "description": "WPMU DEV Shared UI React Components", "author": "WPMU DEV", "contributors": [ @@ -40,18 +40,20 @@ "registry": "https://registry.npmjs.org/" }, "dependencies": { - "@wpmudev/react-accordion": "^1.1.0", - "@wpmudev/react-box": "^1.2.5", - "@wpmudev/react-button": "^1.1.0", - "@wpmudev/react-button-icon": "^1.1.0", - "@wpmudev/react-dropdown": "^1.1.4", - "@wpmudev/react-input": "^1.1.0", - "@wpmudev/react-notifications": "^1.0.8", - "@wpmudev/react-pagination": "^1.1.0", - "@wpmudev/react-post": "^1.1.5" + "@wpmudev/react-accordion": "^1.2.1", + "@wpmudev/react-box": "^1.2.7", + "@wpmudev/react-button": "^1.1.2", + "@wpmudev/react-button-icon": "^1.1.2", + "@wpmudev/react-dropdown": "^1.1.6", + "@wpmudev/react-input": "^1.2.2", + "@wpmudev/react-notifications": "^1.1.1", + "@wpmudev/react-pagination": "^1.1.4", + "@wpmudev/react-post": "^1.1.7", + "@wpmudev/react-radio-checkbox": "^1.0.1", + "@wpmudev/react-toggle": "^1.0.0" }, "devDependencies": { - "@wpmudev/react-builder": "^0.0.0" + "@wpmudev/react-builder": "^1.0.1" }, "gitHead": "373d3acb2bc8f3226c519b6174c007bec68500a6" } diff --git a/packages/react-accordion/dist/react-accordion.cjs.js b/packages/react-accordion/dist/react-accordion.cjs.js index 1e3af5c3..a6897a88 100644 --- a/packages/react-accordion/dist/react-accordion.cjs.js +++ b/packages/react-accordion/dist/react-accordion.cjs.js @@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau var React__default = /*#__PURE__*/_interopDefaultLegacy(React); var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled); -function _extends() { - _extends = Object.assign || function (target) { +function _extends$1() { + _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -25,10 +25,10 @@ function _extends() { return target; }; - return _extends.apply(this, arguments); + return _extends$1.apply(this, arguments); } -function _objectWithoutPropertiesLoose(source, excluded) { +function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -43,10 +43,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { return target; } -function _objectWithoutProperties(source, excluded) { +function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); + var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; @@ -85,14 +85,17 @@ function _arrayWithHoles(arr) { } function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -132,30 +135,14 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { + enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); + })), keys.push.apply(keys, symbols); } return keys; @@ -163,24 +150,32 @@ function ownKeys(object, enumerableOnly) { function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } return target; } +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; @@ -217,84 +212,197 @@ function _objectWithoutProperties$1(source, excluded) { return target; } +var _excluded$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + var ButtonIcon = function ButtonIcon(_ref) { var label = _ref.label, icon = _ref.icon, iconSize = _ref.iconSize, _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, + design = _ref$design === void 0 ? 'solid' : _ref$design, color = _ref.color, className = _ref.className, loading = _ref.loading, - props = _objectWithoutProperties$1(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); + props = _objectWithoutProperties$1(_ref, _excluded$2); - var loader = /*#__PURE__*/React__default['default'].createElement("span", { + var loader = /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-loader sui-loading", style: { - position: "relative" + position: 'relative' }, "aria-hidden": "true" }); - var content = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("span", { + var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-".concat(icon).concat(iconSize ? ' sui-' + iconSize : ''), "aria-hidden": "true" - }), /*#__PURE__*/React__default['default'].createElement("span", { + }), /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-screen-reader-text" }, label)); className = "sui-button-icon ".concat(className || ''); // Set button color. switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case "gray": + case 'gray': default: - className += ""; + className += ''; break; } // Set button style. switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; - case "solid": + case 'solid': default: - className += ""; + className += ''; break; } // Set loading class. if (loading) { - className += " sui-button-onload"; + className += ' sui-button-onload'; } var htmlTag = props.href ? 'a' : 'button'; - return /*#__PURE__*/React__default['default'].createElement(htmlTag, _objectSpread2({ + return /*#__PURE__*/React__default["default"].createElement(htmlTag, _objectSpread2({ className: className, disabled: props.disabled || loading }, props), loading ? loader : content); }; -function _templateObject() { - var data = _taggedTemplateLiteral(["\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 10px;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n"]); +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } - _templateObject = function _templateObject() { - return data; + return target; }; - return data; + return _extends.apply(this, arguments); } -var ItemImage = styled__default['default'].span(_templateObject()); + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var _excluded$1 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"]; + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, _excluded$1); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React__default["default"].createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React__default["default"].createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React__default["default"].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React__default["default"].createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React__default["default"].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React__default["default"].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default["default"].createElement("span", { + id: labelId + }, label)); +}; + +var _excluded = ["children"], + _excluded2 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded3 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded4 = ["children"]; + +var _templateObject; +var ItemImage = styled__default["default"].span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: 30px;\n\theight: 30px;\n\tmargin-right: 10px;\n\tborder-radius: 10px;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n\tbackground-position: center;\n"]))); var useToggle = function useToggle() { var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; @@ -314,9 +422,9 @@ var useToggle = function useToggle() { var Accordion = function Accordion(_ref) { var children = _ref.children, - props = _objectWithoutProperties(_ref, ["children"]); + props = _objectWithoutProperties$2(_ref, _excluded); - return /*#__PURE__*/React__default['default'].createElement("div", _extends({ + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ className: "sui-accordion" }, props), children); }; @@ -327,23 +435,35 @@ var AccordionItem = function AccordionItem(_ref2) { icon = _ref2.icon, image = _ref2.image, children = _ref2.children, - props = _objectWithoutProperties(_ref2, ["title", "titleSize", "icon", "image", "children"]); + checkboxInput = _ref2.checkboxInput, + checkboxId = _ref2.checkboxId, + checkboxName = _ref2.checkboxName, + checkboxLabel = _ref2.checkboxLabel, + checkboxSelected = _ref2.checkboxSelected, + checkboxClickHandler = _ref2.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref2, _excluded2); var _useToggle = useToggle(), _useToggle2 = _slicedToArray(_useToggle, 2), isOpen = _useToggle2[0], setIsOpen = _useToggle2[1]; - return /*#__PURE__*/React__default['default'].createElement("div", _extends({ + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') - }, props), /*#__PURE__*/React__default['default'].createElement(AccordionItemHeader, { + }, props), /*#__PURE__*/React__default["default"].createElement(AccordionItemHeader, { state: isOpen ? 'true' : 'false', title: title, titleSize: titleSize, icon: icon, image: image, - onClick: setIsOpen - }), /*#__PURE__*/React__default['default'].createElement(AccordionItemBody, null, children)); + onClick: setIsOpen, + checkboxInput: checkboxInput, + checkboxId: checkboxId, + checkboxSelected: checkboxSelected, + checkboxClickHandler: checkboxClickHandler, + checkboxName: checkboxName, + checkboxLabel: checkboxLabel + }), /*#__PURE__*/React__default["default"].createElement(AccordionItemBody, null, children)); }; var AccordionItemHeader = function AccordionItemHeader(_ref3) { @@ -352,53 +472,67 @@ var AccordionItemHeader = function AccordionItemHeader(_ref3) { icon = _ref3.icon, image = _ref3.image, children = _ref3.children, - props = _objectWithoutProperties(_ref3, ["title", "titleSize", "icon", "image", "children"]); + checkboxInput = _ref3.checkboxInput, + checkboxId = _ref3.checkboxId, + checkboxName = _ref3.checkboxName, + checkboxLabel = _ref3.checkboxLabel, + checkboxSelected = _ref3.checkboxSelected, + checkboxClickHandler = _ref3.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref3, _excluded3); var _useState3 = React.useState(false), _useState4 = _slicedToArray(_useState3, 1), isOpen = _useState4[0]; - var countChildren = React__default['default'].Children.toArray(children).length; - var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React__default['default'].createElement("span", { + var countChildren = React__default["default"].Children.toArray(children).length; + var titleColumnIcon = 'undefined' !== typeof icon && '' !== icon ? /*#__PURE__*/React__default["default"].createElement("span", { className: "sui-icon-".concat(icon), "aria-hidden": "true" }) : ''; - var titleColumnImage = 'undefined' !== typeof image && '' !== icon ? /*#__PURE__*/React__default['default'].createElement(ItemImage, { + var titleColumnImage = 'undefined' !== typeof image && '' !== image ? /*#__PURE__*/React__default["default"].createElement(ItemImage, { style: { backgroundImage: "url(".concat(image, ")") } }) : ''; var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; - var titleColumn = /*#__PURE__*/React__default['default'].createElement("div", { + var checkboxItem = checkboxInput ? /*#__PURE__*/React__default["default"].createElement(RadioCheckboxInput, { + type: "checkbox", + id: checkboxId, + name: checkboxName, + defaultChecked: checkboxSelected, + onChange: checkboxClickHandler, + label: checkboxLabel + }) : ''; + var titleColumn = /*#__PURE__*/React__default["default"].createElement("div", { className: "sui-accordion-item-title".concat(titleColumnSize) - }, titleColumnIcon, titleColumnImage, title); - var indicator = /*#__PURE__*/React__default['default'].createElement(ButtonIcon, { + }, checkboxItem, titleColumnIcon, titleColumnImage, title); + var indicator = /*#__PURE__*/React__default["default"].createElement(ButtonIcon, { icon: "chevron-down", label: isOpen ? 'Close section' : 'Open section', className: "sui-button-icon sui-accordion-open-indicator" }); - var columns = React__default['default'].Children.map(children, function (column, index) { + var columns = React__default["default"].Children.map(children, function (column, index) { index++; var columnSize = column.props.size; var columnClass = 'undefined' !== typeof columnSize && '' !== columnSize ? 'sui-accordion-col-' + columnSize : 'sui-accordion-col-auto'; var columnContent = column.props.children; - return /*#__PURE__*/React__default['default'].createElement("div", { + return /*#__PURE__*/React__default["default"].createElement("div", { className: columnClass }, columnContent, countChildren === index && indicator); }); - var actions = /*#__PURE__*/React__default['default'].createElement("div", { + var actions = /*#__PURE__*/React__default["default"].createElement("div", { className: "sui-accordion-col-auto" }, indicator); - return /*#__PURE__*/React__default['default'].createElement("div", _extends({ + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ className: "sui-accordion-item-header" }, props), titleColumn, countChildren > 0 ? columns : actions); }; var AccordionItemBody = function AccordionItemBody(_ref4) { var children = _ref4.children, - props = _objectWithoutProperties(_ref4, ["children"]); + props = _objectWithoutProperties$2(_ref4, _excluded4); - return /*#__PURE__*/React__default['default'].createElement("div", _extends({ + return /*#__PURE__*/React__default["default"].createElement("div", _extends$1({ className: "sui-accordion-item-body" }, props), children); }; diff --git a/packages/react-accordion/dist/react-accordion.esm.js b/packages/react-accordion/dist/react-accordion.esm.js index 822e65b4..9a3154af 100644 --- a/packages/react-accordion/dist/react-accordion.esm.js +++ b/packages/react-accordion/dist/react-accordion.esm.js @@ -1,8 +1,8 @@ import React, { useState, useCallback } from 'react'; import styled from 'styled-components'; -function _extends() { - _extends = Object.assign || function (target) { +function _extends$1() { + _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; @@ -16,10 +16,10 @@ function _extends() { return target; }; - return _extends.apply(this, arguments); + return _extends$1.apply(this, arguments); } -function _objectWithoutPropertiesLoose(source, excluded) { +function _objectWithoutPropertiesLoose$2(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); @@ -34,10 +34,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { return target; } -function _objectWithoutProperties(source, excluded) { +function _objectWithoutProperties$2(source, excluded) { if (source == null) return {}; - var target = _objectWithoutPropertiesLoose(source, excluded); + var target = _objectWithoutPropertiesLoose$2(source, excluded); var key, i; @@ -76,14 +76,17 @@ function _arrayWithHoles(arr) { } function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; + + if (_i == null) return; var _arr = []; var _n = true; var _d = false; - var _e = undefined; + + var _s, _e; try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; @@ -123,30 +126,14 @@ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; -} - function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { + enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); - keys.push.apply(keys, symbols); + })), keys.push.apply(keys, symbols); } return keys; @@ -154,24 +141,32 @@ function ownKeys(object, enumerableOnly) { function _objectSpread2(target) { for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - - if (i % 2) { - ownKeys(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]); - }); - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); - } else { - ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); - }); - } + var source = null != arguments[i] ? arguments[i] : {}; + i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { + _defineProperty(target, key, source[key]); + }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { + Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); + }); } return target; } +function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; +} + function _objectWithoutPropertiesLoose$1(source, excluded) { if (source == null) return {}; var target = {}; @@ -208,21 +203,23 @@ function _objectWithoutProperties$1(source, excluded) { return target; } +var _excluded$2 = ["label", "icon", "iconSize", "design", "color", "className", "loading"]; + var ButtonIcon = function ButtonIcon(_ref) { var label = _ref.label, icon = _ref.icon, iconSize = _ref.iconSize, _ref$design = _ref.design, - design = _ref$design === void 0 ? "solid" : _ref$design, + design = _ref$design === void 0 ? 'solid' : _ref$design, color = _ref.color, className = _ref.className, loading = _ref.loading, - props = _objectWithoutProperties$1(_ref, ["label", "icon", "iconSize", "design", "color", "className", "loading"]); + props = _objectWithoutProperties$1(_ref, _excluded$2); var loader = /*#__PURE__*/React.createElement("span", { className: "sui-icon-loader sui-loading", style: { - position: "relative" + position: 'relative' }, "aria-hidden": "true" }); @@ -235,38 +232,38 @@ var ButtonIcon = function ButtonIcon(_ref) { className = "sui-button-icon ".concat(className || ''); // Set button color. switch (color) { - case "blue": - case "green": - case "red": - case "orange": - case "purple": - case "yellow": - case "white": - className += " sui-button-" + color; + case 'blue': + case 'green': + case 'red': + case 'orange': + case 'purple': + case 'yellow': + case 'white': + className += ' sui-button-' + color; break; - case "gray": + case 'gray': default: - className += ""; + className += ''; break; } // Set button style. switch (design) { - case "ghost": - case "outlined": - className += " sui-button-" + design; + case 'ghost': + case 'outlined': + className += ' sui-button-' + design; break; - case "solid": + case 'solid': default: - className += ""; + className += ''; break; } // Set loading class. if (loading) { - className += " sui-button-onload"; + className += ' sui-button-onload'; } var htmlTag = props.href ? 'a' : 'button'; @@ -276,16 +273,127 @@ var ButtonIcon = function ButtonIcon(_ref) { }, props), loading ? loader : content); }; -function _templateObject() { - var data = _taggedTemplateLiteral(["\n width: 30px;\n height: 30px;\n margin-right: 10px;\n border-radius: 10px;\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n"]); +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; - _templateObject = function _templateObject() { - return data; + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; }; - return data; + return _extends.apply(this, arguments); } -var ItemImage = styled.span(_templateObject()); + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var _excluded$1 = ["type", "label", "labelId", "id", "name", "image", "defaultChecked", "disabled"]; + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, _excluded$1); + + var mainClasses = ["sui-".concat(type)]; + + if (props.size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (props.stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return image ? /*#__PURE__*/React.createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React.createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React.createElement("span", { + className: mainClasses.join(' ') + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + checked: defaultChecked + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React.createElement("label", { + className: mainClasses.join(' '), + htmlFor: id + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + checked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label)); +}; + +var _excluded = ["children"], + _excluded2 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded3 = ["title", "titleSize", "icon", "image", "children", "checkboxInput", "checkboxId", "checkboxName", "checkboxLabel", "checkboxSelected", "checkboxClickHandler"], + _excluded4 = ["children"]; + +var _templateObject; +var ItemImage = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: 30px;\n\theight: 30px;\n\tmargin-right: 10px;\n\tborder-radius: 10px;\n\tbackground-repeat: no-repeat;\n\tbackground-size: cover;\n\tbackground-position: center;\n"]))); var useToggle = function useToggle() { var initialValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; @@ -305,9 +413,9 @@ var useToggle = function useToggle() { var Accordion = function Accordion(_ref) { var children = _ref.children, - props = _objectWithoutProperties(_ref, ["children"]); + props = _objectWithoutProperties$2(_ref, _excluded); - return /*#__PURE__*/React.createElement("div", _extends({ + return /*#__PURE__*/React.createElement("div", _extends$1({ className: "sui-accordion" }, props), children); }; @@ -318,14 +426,20 @@ var AccordionItem = function AccordionItem(_ref2) { icon = _ref2.icon, image = _ref2.image, children = _ref2.children, - props = _objectWithoutProperties(_ref2, ["title", "titleSize", "icon", "image", "children"]); + checkboxInput = _ref2.checkboxInput, + checkboxId = _ref2.checkboxId, + checkboxName = _ref2.checkboxName, + checkboxLabel = _ref2.checkboxLabel, + checkboxSelected = _ref2.checkboxSelected, + checkboxClickHandler = _ref2.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref2, _excluded2); var _useToggle = useToggle(), _useToggle2 = _slicedToArray(_useToggle, 2), isOpen = _useToggle2[0], setIsOpen = _useToggle2[1]; - return /*#__PURE__*/React.createElement("div", _extends({ + return /*#__PURE__*/React.createElement("div", _extends$1({ className: "sui-accordion-item".concat(isOpen ? ' sui-accordion-item--open' : '') }, props), /*#__PURE__*/React.createElement(AccordionItemHeader, { state: isOpen ? 'true' : 'false', @@ -333,7 +447,13 @@ var AccordionItem = function AccordionItem(_ref2) { titleSize: titleSize, icon: icon, image: image, - onClick: setIsOpen + onClick: setIsOpen, + checkboxInput: checkboxInput, + checkboxId: checkboxId, + checkboxSelected: checkboxSelected, + checkboxClickHandler: checkboxClickHandler, + checkboxName: checkboxName, + checkboxLabel: checkboxLabel }), /*#__PURE__*/React.createElement(AccordionItemBody, null, children)); }; @@ -343,7 +463,13 @@ var AccordionItemHeader = function AccordionItemHeader(_ref3) { icon = _ref3.icon, image = _ref3.image, children = _ref3.children, - props = _objectWithoutProperties(_ref3, ["title", "titleSize", "icon", "image", "children"]); + checkboxInput = _ref3.checkboxInput, + checkboxId = _ref3.checkboxId, + checkboxName = _ref3.checkboxName, + checkboxLabel = _ref3.checkboxLabel, + checkboxSelected = _ref3.checkboxSelected, + checkboxClickHandler = _ref3.checkboxClickHandler, + props = _objectWithoutProperties$2(_ref3, _excluded3); var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 1), @@ -354,15 +480,23 @@ var AccordionItemHeader = function AccordionItemHeader(_ref3) { className: "sui-icon-".concat(icon), "aria-hidden": "true" }) : ''; - var titleColumnImage = 'undefined' !== typeof image && '' !== icon ? /*#__PURE__*/React.createElement(ItemImage, { + var titleColumnImage = 'undefined' !== typeof image && '' !== image ? /*#__PURE__*/React.createElement(ItemImage, { style: { backgroundImage: "url(".concat(image, ")") } }) : ''; var titleColumnSize = 'undefined' !== typeof titleSize && '' !== titleSize ? ' sui-accordion-col-' + titleSize : ''; + var checkboxItem = checkboxInput ? /*#__PURE__*/React.createElement(RadioCheckboxInput, { + type: "checkbox", + id: checkboxId, + name: checkboxName, + defaultChecked: checkboxSelected, + onChange: checkboxClickHandler, + label: checkboxLabel + }) : ''; var titleColumn = /*#__PURE__*/React.createElement("div", { className: "sui-accordion-item-title".concat(titleColumnSize) - }, titleColumnIcon, titleColumnImage, title); + }, checkboxItem, titleColumnIcon, titleColumnImage, title); var indicator = /*#__PURE__*/React.createElement(ButtonIcon, { icon: "chevron-down", label: isOpen ? 'Close section' : 'Open section', @@ -380,16 +514,16 @@ var AccordionItemHeader = function AccordionItemHeader(_ref3) { var actions = /*#__PURE__*/React.createElement("div", { className: "sui-accordion-col-auto" }, indicator); - return /*#__PURE__*/React.createElement("div", _extends({ + return /*#__PURE__*/React.createElement("div", _extends$1({ className: "sui-accordion-item-header" }, props), titleColumn, countChildren > 0 ? columns : actions); }; var AccordionItemBody = function AccordionItemBody(_ref4) { var children = _ref4.children, - props = _objectWithoutProperties(_ref4, ["children"]); + props = _objectWithoutProperties$2(_ref4, _excluded4); - return /*#__PURE__*/React.createElement("div", _extends({ + return /*#__PURE__*/React.createElement("div", _extends$1({ className: "sui-accordion-item-body" }, props), children); }; diff --git a/packages/react-accordion/docs/assets/images/logo.png b/packages/react-accordion/docs/assets/images/logo.png new file mode 100644 index 00000000..19bcd5d6 Binary files /dev/null and b/packages/react-accordion/docs/assets/images/logo.png differ diff --git a/packages/react-accordion/docs/react-accordion-demo.stories.js b/packages/react-accordion/docs/react-accordion-demo.stories.js new file mode 100644 index 00000000..9fa1b060 --- /dev/null +++ b/packages/react-accordion/docs/react-accordion-demo.stories.js @@ -0,0 +1,127 @@ +import React from 'react'; +import { Accordion, AccordionItem } from '../lib/react-accordion'; + +import LogoImage from './assets/images/logo.png'; + +export default { + title: 'Containers/Accordion', + component: AccordionItem, +}; + +export const Demo = ({ children, ...props }) => { + return ( +
+ + {children} + +
+ ); +}; +Demo.args = { + title: 'Accordion Item', + icon: 'wpmudev-logo', + image: LogoImage, + checkboxInput: true, + checkboxId: 'accordion-item-1', + children: ( +
+
+

Accordion content goes here.

+
+
+ ), +}; +Demo.argTypes = { + title: { + type: { + required: true, + }, + description: 'This required property adds some bold text to the **AccordionItem**.', + table: { + type: { + summary: 'string', + }, + }, + control: { + type: 'text', + }, + }, + icon: { + description: + 'Use this property to include an icon before the accordion item title. ' + + 'Check out the available icons here.', + table: { + type: { + summary: 'string', + }, + }, + control: { + type: 'text', + }, + }, + image: { + description: 'Use this property to include an image before the accordion item title.', + table: { + type: { + summary: 'string', + }, + }, + control: { + type: 'text', + }, + }, + children: { + type: { + required: true, + }, + description: 'Place the content you would like to display inside the component.', + table: { + type: { + summary: 'element[]', + }, + }, + control: { + type: null, + }, + }, + checkboxInput: { + description: 'Whether to show or hide checkbox.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + control: { + type: 'boolean', + }, + }, + checkboxId: { + description: 'Id of accordion checkbox.', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'null' }, + }, + control: { + type: 'text', + }, + }, + checkboxSelected: { + description: 'Whether the checkbox should be default selected.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + control: { + type: 'boolean', + }, + }, + checkboxClickHandler: { + description: 'Checkbox click event handler.', + table: { + type: { summary: 'function' }, + defaultValue: { summary: 'null' }, + }, + control: { + type: null, + }, + }, +}; diff --git a/packages/react-accordion/docs/react-accordion-elements.stories.js b/packages/react-accordion/docs/react-accordion-elements.stories.js new file mode 100644 index 00000000..01933568 --- /dev/null +++ b/packages/react-accordion/docs/react-accordion-elements.stories.js @@ -0,0 +1,199 @@ +import React from 'react'; +import { Accordion, AccordionItem } from '../lib/react-accordion'; + +import LogoImage from './assets/images/logo.png'; + +export default { + title: 'Containers/Accordion/Item Elements', + parameters: { + actions: { + disable: true, + }, + controls: { + disable: true, + }, + previewTabs: { + 'storybook/docs/panel': { + hidden: true, + }, + }, + }, + decorators: [ + (Story) => ( +
+
+ +
+
+ ), + ], +}; + +const Template = ({ children, ...props }) => { + return ( + + {children} + + ); +}; + +const StoryTitle = ({ children }) => { + const customStyles = { + margin: 0, + marginBottom: 10 + 'px', + color: '#333', + fontSize: 14 + 'px', + lineHeight: 22 + 'px', + }; + + return

{children}

; +}; + +const StoryDescription = ({ children }) => { + const customStyles = { + margin: 0, + marginBottom: 10 + 'px', + }; + + return ( +

+ {children} +

+ ); +}; + +const StoryCode = ({ spaceTop = 5, spaceBottom = 20, children }) => { + const customStyles = { + display: 'block', + margin: 0, + marginTop: spaceTop + 'px', + marginBottom: spaceBottom + 'px', + padding: 5 + 'px ' + 10 + 'px', + }; + + return {children}; +}; + +const StorySection = ({ + title, + description, + code, + code2, + isDefault = false, + isLast = false, + children, +}) => { + return ( + <> + {title && '' !== title && ( + + {title} + {isDefault && ( + + )} + + )} + {description && '' !== description && {description}} + {code && '' !== code && ( + {code} + )} + {code2 && '' !== code2 && {code2}} + {children} + {!isLast &&
} + + ); +}; + +export const Checkbox = (args) => { + return ( + +