diff --git a/apps/docs/src/usages/select.tsx b/apps/docs/src/usages/select.tsx index 2538947..f34699e 100644 --- a/apps/docs/src/usages/select.tsx +++ b/apps/docs/src/usages/select.tsx @@ -12,10 +12,10 @@ export default () => { return (
- {(item) => {item.name}} - {(item) => {item.name}}
diff --git a/packages/actify/src/components/Select/Select.tsx b/packages/actify/src/components/Select/Select.tsx index f48b9c8..5fe53c5 100644 --- a/packages/actify/src/components/Select/Select.tsx +++ b/packages/actify/src/components/Select/Select.tsx @@ -23,16 +23,9 @@ const Select = (props: SelectProps) => { const state = useSelectState(props) const ref = React.useRef(null) - const { labelProps, triggerProps, valueProps, menuProps } = useSelect( - props, - state, - ref - ) + const { triggerProps, valueProps, menuProps } = useSelect(props, state, ref) const { variant = 'filled' } = props - const label = state.selectedItem - ? state.selectedItem.rendered - : 'Select an option' let Tag = FilledField if (variant == 'filled') { @@ -44,10 +37,9 @@ const Select = (props: SelectProps) => { return (
- {props.label && } (props: SelectProps) => { /> - diff --git a/packages/actify/src/components/Select/select.module.css b/packages/actify/src/components/Select/select.module.css index 6e38443..8d2689a 100644 --- a/packages/actify/src/components/Select/select.module.css +++ b/packages/actify/src/components/Select/select.module.css @@ -1,335 +1,12 @@ -.outlined-select { - --_bottom-space: var(--md-outlined-field-bottom-space, 16px); - --_content-color: var( - --md-outlined-field-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_content-font: var( - --md-outlined-field-content-font, - var( - --md-sys-typescale-body-large-font, - var(--md-ref-typeface-plain, Roboto) - ) - ); - --_content-line-height: var( - --md-outlined-field-content-line-height, - var(--md-sys-typescale-body-large-line-height, 1.5rem) - ); - --_content-size: var( - --md-outlined-field-content-size, - var(--md-sys-typescale-body-large-size, 1rem) - ); - --_content-space: var(--md-outlined-field-content-space, 16px); - --_content-weight: var( - --md-outlined-field-content-weight, - var( - --md-sys-typescale-body-large-weight, - var(--md-ref-typeface-weight-regular, 400) - ) - ); - --_disabled-content-color: var( - --md-outlined-field-disabled-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-content-opacity: var( - --md-outlined-field-disabled-content-opacity, - 0.38 - ); - --_disabled-label-text-color: var( - --md-outlined-field-disabled-label-text-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-label-text-opacity: var( - --md-outlined-field-disabled-label-text-opacity, - 0.38 - ); - --_disabled-leading-content-color: var( - --md-outlined-field-disabled-leading-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-leading-content-opacity: var( - --md-outlined-field-disabled-leading-content-opacity, - 0.38 - ); - --_disabled-outline-color: var( - --md-outlined-field-disabled-outline-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-outline-opacity: var( - --md-outlined-field-disabled-outline-opacity, - 0.12 - ); - --_disabled-outline-width: var( - --md-outlined-field-disabled-outline-width, - 1px - ); - --_disabled-supporting-text-color: var( - --md-outlined-field-disabled-supporting-text-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-supporting-text-opacity: var( - --md-outlined-field-disabled-supporting-text-opacity, - 0.38 - ); - --_disabled-trailing-content-color: var( - --md-outlined-field-disabled-trailing-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_disabled-trailing-content-opacity: var( - --md-outlined-field-disabled-trailing-content-opacity, - 0.38 - ); - --_error-content-color: var( - --md-outlined-field-error-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_error-focus-content-color: var( - --md-outlined-field-error-focus-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_error-focus-label-text-color: var( - --md-outlined-field-error-focus-label-text-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-focus-leading-content-color: var( - --md-outlined-field-error-focus-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_error-focus-outline-color: var( - --md-outlined-field-error-focus-outline-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-focus-supporting-text-color: var( - --md-outlined-field-error-focus-supporting-text-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-focus-trailing-content-color: var( - --md-outlined-field-error-focus-trailing-content-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-hover-content-color: var( - --md-outlined-field-error-hover-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_error-hover-label-text-color: var( - --md-outlined-field-error-hover-label-text-color, - var(--md-sys-color-on-error-container, #410e0b) - ); - --_error-hover-leading-content-color: var( - --md-outlined-field-error-hover-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_error-hover-outline-color: var( - --md-outlined-field-error-hover-outline-color, - var(--md-sys-color-on-error-container, #410e0b) - ); - --_error-hover-supporting-text-color: var( - --md-outlined-field-error-hover-supporting-text-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-hover-trailing-content-color: var( - --md-outlined-field-error-hover-trailing-content-color, - var(--md-sys-color-on-error-container, #410e0b) - ); - --_error-label-text-color: var( - --md-outlined-field-error-label-text-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-leading-content-color: var( - --md-outlined-field-error-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_error-outline-color: var( - --md-outlined-field-error-outline-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-supporting-text-color: var( - --md-outlined-field-error-supporting-text-color, - var(--md-sys-color-error, #b3261e) - ); - --_error-trailing-content-color: var( - --md-outlined-field-error-trailing-content-color, - var(--md-sys-color-error, #b3261e) - ); - --_focus-content-color: var( - --md-outlined-field-focus-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_focus-label-text-color: var( - --md-outlined-field-focus-label-text-color, - var(--md-sys-color-primary, #6750a4) - ); - --_focus-leading-content-color: var( - --md-outlined-field-focus-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_focus-outline-color: var( - --md-outlined-field-focus-outline-color, - var(--md-sys-color-primary, #6750a4) - ); - --_focus-outline-width: var(--md-outlined-field-focus-outline-width, 3px); - --_focus-supporting-text-color: var( - --md-outlined-field-focus-supporting-text-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_focus-trailing-content-color: var( - --md-outlined-field-focus-trailing-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_hover-content-color: var( - --md-outlined-field-hover-content-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_hover-label-text-color: var( - --md-outlined-field-hover-label-text-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_hover-leading-content-color: var( - --md-outlined-field-hover-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_hover-outline-color: var( - --md-outlined-field-hover-outline-color, - var(--md-sys-color-on-surface, #1d1b20) - ); - --_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px); - --_hover-supporting-text-color: var( - --md-outlined-field-hover-supporting-text-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_hover-trailing-content-color: var( - --md-outlined-field-hover-trailing-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_label-text-color: var( - --md-outlined-field-label-text-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_label-text-font: var( - --md-outlined-field-label-text-font, - var( - --md-sys-typescale-body-large-font, - var(--md-ref-typeface-plain, Roboto) - ) - ); - --_label-text-line-height: var( - --md-outlined-field-label-text-line-height, - var(--md-sys-typescale-body-large-line-height, 1.5rem) - ); - --_label-text-padding-bottom: var( - --md-outlined-field-label-text-padding-bottom, - 8px - ); - --_label-text-populated-line-height: var( - --md-outlined-field-label-text-populated-line-height, - var(--md-sys-typescale-body-small-line-height, 1rem) - ); - --_label-text-populated-size: var( - --md-outlined-field-label-text-populated-size, - var(--md-sys-typescale-body-small-size, 0.75rem) - ); - --_label-text-size: var( - --md-outlined-field-label-text-size, - var(--md-sys-typescale-body-large-size, 1rem) - ); - --_label-text-weight: var( - --md-outlined-field-label-text-weight, - var( - --md-sys-typescale-body-large-weight, - var(--md-ref-typeface-weight-regular, 400) - ) - ); - --_leading-content-color: var( - --md-outlined-field-leading-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_leading-space: var(--md-outlined-field-leading-space, 16px); - --_outline-color: var( - --md-outlined-field-outline-color, - var(--md-sys-color-outline, #79747e) - ); - --_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px); - --_outline-width: var(--md-outlined-field-outline-width, 1px); - --_supporting-text-color: var( - --md-outlined-field-supporting-text-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_supporting-text-font: var( - --md-outlined-field-supporting-text-font, - var( - --md-sys-typescale-body-small-font, - var(--md-ref-typeface-plain, Roboto) - ) - ); - --_supporting-text-leading-space: var( - --md-outlined-field-supporting-text-leading-space, - 16px - ); - --_supporting-text-line-height: var( - --md-outlined-field-supporting-text-line-height, - var(--md-sys-typescale-body-small-line-height, 1rem) - ); - --_supporting-text-size: var( - --md-outlined-field-supporting-text-size, - var(--md-sys-typescale-body-small-size, 0.75rem) - ); - --_supporting-text-top-space: var( - --md-outlined-field-supporting-text-top-space, - 4px - ); - --_supporting-text-trailing-space: var( - --md-outlined-field-supporting-text-trailing-space, - 16px - ); - --_supporting-text-weight: var( - --md-outlined-field-supporting-text-weight, - var( - --md-sys-typescale-body-small-weight, - var(--md-ref-typeface-weight-regular, 400) - ) - ); - --_top-space: var(--md-outlined-field-top-space, 16px); - --_trailing-content-color: var( - --md-outlined-field-trailing-content-color, - var(--md-sys-color-on-surface-variant, #49454f) - ); - --_trailing-space: var(--md-outlined-field-trailing-space, 16px); - --_with-leading-content-leading-space: var( - --md-outlined-field-with-leading-content-leading-space, - 12px - ); - --_with-trailing-content-trailing-space: var( - --md-outlined-field-with-trailing-content-trailing-space, - 12px - ); - --_container-shape-start-start: var( - --md-outlined-field-container-shape-start-start, - var( - --md-outlined-field-container-shape, - var(--md-sys-shape-corner-extra-small, 4px) - ) - ); - --_container-shape-start-end: var( - --md-outlined-field-container-shape-start-end, - var( - --md-outlined-field-container-shape, - var(--md-sys-shape-corner-extra-small, 4px) - ) - ); - --_container-shape-end-end: var( - --md-outlined-field-container-shape-end-end, - var( - --md-outlined-field-container-shape, - var(--md-sys-shape-corner-extra-small, 4px) - ) - ); - --_container-shape-end-start: var( - --md-outlined-field-container-shape-end-start, - var( - --md-outlined-field-container-shape, - var(--md-sys-shape-corner-extra-small, 4px) - ) - ); +.select { + width: 100%; + height: 56px; + outline: none; + min-width: inherit; + max-width: inherit; + display: flex; + position: relative; + flex-direction: column; } .filled-select { display: inline-flex; @@ -1408,16 +1085,7 @@ --_text-field-trailing-icon-color ); } -.select { - width: 100%; - height: 56px; - outline: none; - min-width: inherit; - max-width: inherit; - display: flex; - position: relative; - flex-direction: column; -} + .select-option { display: flex; --md-ripple-hover-color: var(